CSS 第一个没有类的元素答案

【问题标题】：CSS First element that does not have a classCSS 第一个没有类的元素
【发布时间】：2014-02-12 04:13:39
【问题描述】：

我有一些列表项，第一个是有特色课程的，然后是一些没有的。有了 CSS，我想选择列表中的第一项没有特色类...

代码如下：

<ul>
<li class="featured"></li>
<li class="featured"></li>
<li></li>
<li></li>
<li></li>
</ul>

我试过以下没有效果：

ul li:not(.featured):first-child {
  /* Do some stuff here */
}

关于如何在不借助 jQuery 的情况下做到这一点的任何想法？

更新如果有帮助的话，确实存在添加非要素类的能力。例如：

<ul>
<li class="listing featured"></li>
<li class="listing featured"></li>
<li class="listing"></li>
<li class="listing"></li>
<li class="listing"></li>
</ul>

【问题讨论】：

:first-child 就是这样：匹配其父母的第一个孩子的元素，而不是“过滤这个左边的规则部分匹配的事物列表”

标签： css css-selectors pseudo-class

【解决方案1】：

除了@Cédric Belin 的出色回答 - 如果您想让 CSS 向后兼容，您可以使用以下 CSS 选择器：

ul .featured + li {
    /* some styles */
}

ul li.featured {
    /* some styles */
}

请注意，这里 CSS 样式的顺序很重要，因为两个选择器具有相同的权重 - 所以最后出现的样式将覆盖前一个样式（由于 CSS 的级联性质）

工作示例：http://jsfiddle.net/Ku77T/

【讨论】：

幸运的是，我不太关心“特色”项目本身，它更多的是“特色”项目之后的第一个项目:)

【解决方案2】：

使用“相邻兄弟组合器”：http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

li.featured + li:not([class="featured"])

【讨论】：

啊，你只犯了一个错误，你需要使用+ 而不是~ 我调整了你的选择器，看看，但是我+1，很好
感谢您的评论 :) 我已编辑代码以提供正确的选择器。
太好了，我刚刚删除了我的答案:)
太棒了 - 完全忘记了相邻的选择器！