除第一类以外的所有人的选择器答案

【问题标题】：Selector for all but first of class除第一类以外的所有人的选择器
【发布时间】：2013-01-10 12:37:58
【问题描述】：

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 之外的所有li.img 都具有蓝色背景。

【问题讨论】：

标签： css

【解决方案1】：

您不能对 :not(:first-child) 执行此操作，因为除第一个 li 之外的所有 li.img 元素（无论是否为 .img）确实不是其父级的第一个子级。因此，只有当第一个 li 没有限定条件时，该选择器才会排除第一个 li.img。

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

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

此选择器匹配任何li.img，它是任何其他li.img 的兄弟，但按文档顺序出现在它之后，或者换句话说，每个li.img，但第一个。

See it in action，请注意 IE

【讨论】：

这确实适用于 IE7 和 8。我使用选择器分隔了一些输入字段。
你知道如何制作一个类似于.img:not(.img~.img) 的工作选择器（这不起作用）只选择一流的吗？ jsfiddle.net/oriadam/27cfmbpp
@oriadam off the top 可能使用我的回答中的技术here: .img 设置您想要的一流的属性值，然后.img ~ .img 将其重置回来除了一流之外的所有内容都恢复到以前的值。
感谢@Jon - 我无法使用该技术，因为我选择带有querySelectorAll 的元素，而不是设置css 属性。我需要选择每个班级的第一个，例如：#element1,.class1:first,class2:first,class3:first。我可以使用 JS 用 ',' 拆分查询，然后合并几个 querySelector（不是全部），但这很丑，而且会减慢代码速度。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：