我有一个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:“每个元素，除了第一个”?
当前回答
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)){}
你发布的一个版本实际上适用于所有现代浏览器(支持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属性的默认值。
由于:not不被IE6-8所接受，我建议你这样做:
div ul:nth-child(n+2) {
background-color: #900;
}
所以你选择了父元素中的每个ul，除了第一个。
参考Chris Coyer的“有用的:第n个孩子的食谱”一文，了解更多关于第n个孩子的例子。
你可以像下面这样使用:not你可以使用:not()里面的任何选择器
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
你也可以使用:not without parent selector。
:not(:nth-child(2)){
/*YOUR STYLE*/
}
更多的例子
any_CSS_selector:not(:first-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
/*YOUR STYLE*/
}
li + li {
background-color: red;
}
