除了第一类之外的所有选择器

Question

HTML:

<ul>
    <li></li>
    <li></li>
    <li class="img"></li>        
    <li></li>
    <li class="img"></li>        
    <li class="img"></li>        
    <li></li>
</ul>

CSS:

ul {
 list-style-type: none;   
}

li {
    background-color: red;
    margin: 5px;
    width: 30px;
    height: 30px;
    float: left;
}

li.img:not(:first-child) {
    background-color: blue;
}

结果:

http://jsfiddle.net/benfosterdev/K3ZnA/

我希望除了第一个之外的所有人li.img都有蓝色背景.

Answer 1

你不能这样做:not(:first-child)因为li.img除了第一个之外的所有元素li(无论是否.img)都不是他们父母的第一个孩子.因此,li.img只有在第一个li没有限定条件的情况下,选择器才会排除第一个.

但是,您可以使用通用兄弟组合器 ~:

li.img ~ li.img {
    background-color: blue;
}

此选择器匹配任何li.img其他兄弟的兄弟,li.img但在文档顺序之后显示在其后,或者换句话说,li.img除了第一个之外.

请参阅它的实际操作,并注意IE <9不支持此选择器.

Answer 2

如果你想选择所有其他li.img并给它们一个不同的backgroundColor:

li.img ~ li.img {
   background-color: blue;
}