不：第一个孩子选择器

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

由于IE6-8不接受：not，我建议您：

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

因此，您在其父元素中拾取每个ul，第一个除外。

请参阅Chris Coyer的“有用的：第n个孩子食谱”一文，了解更多第n个孩子的例子。

Answer 2

这个CSS2解决方案（“任何ul一个接一个ul”）也可以工作，并且受到更多浏览器的支持。

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

与： not和： nth兄弟姐妹不同，IE7支持相邻的兄弟姐妹选择器。

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

对于任何静态网页，这都应该可以完美地工作。

Answer 3

您发布的版本之一实际上适用于所有现代浏览器（支持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属性使用默认值。