我怎样才能使用一个不:首先

我有包含多个ul标签的div标签。

如果我只为第一个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:“每个元素,除了第一个”?


您发布的其中一个版本实际适用于所有现代浏览器(支持CSS选择器级别3):

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

如果你需要支持传统的浏览器,或者你受到:not 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属性使用默认值。


这个CSS2解决方案(“任何ul又一个ul ”)也适用,并且受更多浏览器支持。

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

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

如果JavaScript在页面加载后更改了这些属性,则应该查看IE7IE8实现中的一些已知错误。 看到这个链接。

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


那么既然:not不被IE6〜8接受,我会建议你这样做:

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

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

参考克里斯Coyer的“有用:第n孩子食谱”文章为更多nth-child例子。

链接地址: http://www.djcxy.com/p/88383.html

上一篇: How can I use a not:first

下一篇: @mixin compiling with Compass