不:第一个孩子选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不:第一个孩子选择器相关的知识,希望对你有一定的参考价值。

我有一个包含几个div标签的ul标签。

我只能为第一个ul标签设置CSS属性:

div ul:first-child {
    background-color: #900;
}

但是,我以下尝试为除第一个之外的其他ul标记设置CSS属性不起作用:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

我怎么能写CSS:“每个元素,除了第一个”?

答案

您为所有现代浏览器发布了actually works的版本之一(其中CSS selectors level 3supported):

div ul:not(:first-child) {
    background-color: #900;
}

如果您需要支持旧版浏览器,或者如果您受到:not选择器的limitation(它只接受simple selector作为参数)的阻碍,那么您可以使用另一种技术:

定义一个比你想要的范围更大的规则,然后有条件地“撤销”它,将其范围限制为你想要的范围:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

限制范围时,请对要设置的每个CSS属性使用default value

另一答案

这个CSS2解决方案(“任何ul接连ul”)也有效,并且得到了更多浏览器的支持。

div ul + ul {
  background-color: #900;
}

:not:nth-sibling不同,adjacent sibling selector由IE7 +支持。

如果在页面加载后有javascript更改这些属性,您应该查看IE7和IE8实现中的一些已知错误。 See this link

对于任何静态网页,这应该是完美的。

另一答案

由于IE6-8不接受:not,我建议你:

div ul:nth-child(n+2) {
    background-color: #900;
}

所以你在其父元素中选择除第一个之外的每个ul

有关更多"Useful :nth-child Recipes" nth-child的信息,请参阅Chris Coyer的examples文章。

另一答案
div li~li {
    color: red;
}

支持IE7

另一答案

not(:first-child)似乎不再起作用了。至少使用最新版本的Chrome和Firefox。

相反,试试这个:

ul:not(:first-of-type) {}
另一答案

你可以使用not的任何选择器

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
另一答案

上面的一些我没有运气,

这是唯一一个真正适合我的人

ul:not(:first-of-type) {}

当我试图让页面上显示的第一个按钮不受左边距选项影响时,这对我有用。

这是我首先尝试的选项,但它没有用

ul:not(:first-child)

另一答案

因为我使用ul:not(:first-child)是一个完美的解决方案。

div ul:not(:first-child) {
    background-color: #900;
}

为什么这是完美的,因为通过使用ul:not(:first-child),我们可以在内部元素上应用CSS。像li, img, span, a标签等。

但是当使用其他解决方案:

div ul + ul {
  background-color: #900;
}

div li~li {
    color: red;
}

ul:not(:first-of-type) {}

div ul:nth-child(n+2) {
    background-color: #900;
}

这些仅限制ul级CSS。假设我们不能将li上的CSS应用为`div ul + ul li'。

对于内层元素,第一个解决方案完美运行。

div ul:not(:first-child) li{
        background-color: #900;
    }

等等 ...

以上是关于不:第一个孩子选择器的主要内容,如果未能解决你的问题,请参考以下文章

在标签片段android中添加谷歌地点选择器

如何在片段着色器中平铺部分纹理

使用 Sahi 驱动程序使 CSS 选择器(第一个孩子)在 Behat 3 中工作

jquery选择器需要选择父母的所有某些孩子

第一个儿童选择器不选择第一个手风琴体

VSCode自定义代码片段——CSS选择器