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。

但是，您可以使用general sibling combinator ~：

执行此操作

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

此选择器会匹配任何其他li.img的兄弟li.img，但会按照文档顺序显示在其后面，或者换句话说，每个li.img只显示第一个。{/ p>

See it in action ，请注意IE＆lt; 9不支持此选择器。

Answer 2

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

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

Answer 3

可能是，您可以添加一个javascript，如果IE 8（及更早版本）或此类浏览器不支持Jon选择器，如上所述：

document.getElementsByClassName("img")[0].style.backgroundColor = "red";

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

3 个答案: