【问题标题】: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;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-01-16
        • 2015-05-01
        • 2011-07-01
        • 2012-02-07
        • 2011-04-30
        • 1970-01-01
        • 2012-06-16
        • 2010-09-15
        相关资源
        最近更新 更多