不：第一个孩子选择器

Posted 2021-04-18

我有一个包含几个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 3是supported）：

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;
    }

等等 ...