Question

我有一些列表项目，第一个是特色课程，一段时间没有。有了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的情况下执行此操作的任何想法？

更新如果能够提供帮助，那么添加非要素类的能力确实存在。 E.g：

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

Answer 1

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

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

Answer 2

除了@CédricBelin的精彩答案之外 - 如果你想让CSS向后兼容，你可以使用以下CSS选择器：

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

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

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

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

CSS第一个没有类的元素

2 个答案: