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

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 之外的所有 li.img 元素(无论如果它是 .img 或不是)确实不是他们 parent 的第一个 child 。因此，仅当第一个 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 不支持此选择器。