选择为所有，但第一类

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但第一。

See it in action，并意识到，IE <9不支持该选择器。

Answer 2

如果您想选择其他li.img，并给他们一个不同的backgroundColor：

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

Answer 3

可能，你可以的情况下，添加一个javascript像IE 8（以上）或浏览器等通过上述乔恩如告诉不支持〜选择：

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