我有一个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的任何选择器

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)){}

其他回答

由于:not不被IE6-8所接受,我建议你这样做:

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

所以你选择了父元素中的每个ul,除了第一个。

参考Chris Coyer的“有用的:第n个孩子的食谱”一文,了解更多关于第n个孩子的例子。

div li~li {
    color: red;
}

支持IE7

li + li {
    background-color: red;
}

这个CSS2解决方案(“任意ul接另一个ul”)也可以工作,并且得到更多浏览器的支持。

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

与:not和:n -sibling不同,相邻兄弟选择器被IE7+支持。

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

对于任何静态网页,这应该工作得很好。

你可以使用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)){}