不是：第一个孩子选择器

Question

我有一个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中编写“除第一个元素外的每个元素”？

Answer 1

一个您发布的版本的实际工作为所有现代浏览器（如CSS选择3级的支持）：

div ul:not(:first-child) {

    background-color: #900;

}

如果您需要支持旧版浏览器，或者由于:not选择器的限制（仅接受一个简单的选择器作为参数）而受到阻碍，则可以使用另一种技术：

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

div ul {

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

}

div ul:first-child {

    background-color: transparent; /* limits the scope of the previous rule */

}

限制范围时，请为您设置的每个CSS属性使用默认值。

Answer 2

这个CSS2解决方案（“一个ul又一个ul”）也可以使用，并且得到更多浏览器的支持。

div ul + ul {

  background-color: #900;

}

不同于:not和:nth-sibling，IE7 +支持相邻的兄弟选择器。

如果您有JavaScript在页面加载后更改了这些属性，则应查看IE7和IE8实现中的一些已知错误。 请参阅此链接。

对于任何静态网页，这应该都能正常工作。

Answer 3

由于IE6-8:not不接受，因此我建议您这样做：

div ul:nth-child(n+2) {

    background-color: #900;

}

因此，您可以选择ul其父元素中的每个元素（第一个元素除外）。

有关更多示例，请参见Chris Coyer的“有用的第n个孩子的食谱”一文。nth-child