我怎样才能使用一个不:首先
我有包含多个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在页面加载后更改了这些属性,则应该查看IE7和IE8实现中的一些已知错误。 看到这个链接。
对于任何静态网页,这应该完美。
那么既然:not
不被IE6〜8接受,我会建议你这样做:
div ul:nth-child(n+2) {
background-color: #900;
}
所以你选择除了第一个元素之外的其他父元素中的每个ul
。
参考克里斯Coyer的“有用:第n孩子食谱”文章为更多nth-child
例子。