选择具有给定类(CSS)的第一个孩子

Question

我们有一个部分HTML:

<ul>
    <li class="class1">AFFECTED</li>
    <li class="class1 class2">NOT</li>
    <li class="class1">NOT</li>
</ul>

<ul>
    <li class="class1 class2">NOT</li>
    <li class="class1">AFFECTED</li>
    <li class="class1">NOT</li>
</ul>

<ul>
    <li>NOT</li>  
    <li class="class1">AFFECTED</li>
    <li class="class1">NOT</li>
</ul>

我需要一个通用的 css选择器,用于任何只有class1的列表的第一个li.

• 李的额外课程(class2)不得受到影响.
• 只应选择第一个带class1的li(改变A的外观)
• 没有JS/jQuery.
• li是浮动的,所以没有硬编码的n-child.
• 代码是自动生成的,因此无法添加/删除自定义类.

我试过使用:not(class2),[class2]:first-child&:first-of-type但没有用.

谢谢!

解决方案:http://jsfiddle.net/6hxZa/3/

Answer 1

您应该能够.class1使用此选择器仅捕获元素而不捕获其他元素:

li[class="class1"]

您将无法仅匹配这些元素中的第一个,因为没有选择器来执行此操作.:first-child只有选择了第一个孩子之内ul不管是什么类的有,并:first-of-type选择第一个li也不管其类,(这实际上使得相同:first-child的li元素).你必须使用这里给出的技术(它也解释了为什么这两个伪类不起作用)将规则应用于所有这些元素,然后为后续的元素撤消它:

li[class="class1"] {
    /* Apply styles... */
}

li[class="class1"] ~ li[class="class1"] {
    /* ... and remove them after the first */
}

请注意,使用相同的选择器,因此无类别元素和元素.class2都完全不受影响.

这个jsFiddle用提供的HTML演示了所需的效果:http://jsfiddle.net/Cmypc/4/

Answer 2

如果要专门class2从选择器中排除，请使用：

li.class1:first-child:not(.class2) { }

如果要排除class1使用以外的任何其他类：

li[class=class1]:first-child { }

如果您知道要排除哪个类，我会推荐第一个，因为它会减少对其他/未来样式的干扰。

：＃1的的jsfiddle http://jsfiddle.net/Cmypc/ 的＃2的jsfiddle：http://jsfiddle.net/Cmypc/1/

编辑如果您正在寻找一个:first-of-class选择器，则没有选择器（请参阅此线程）。将来的解决方案可能是:nth-match选择器，但您必须等待CSS4。另外，您可以使用更精细的清除选择器来撤消所应用的样式（请参阅BoltClock的答案）作为解决方法。