2

我们有一个部分 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）的 li 不得受到影响。
  • 只应选择 class1 的第一个 li（以更改 A.
  • 没有 JS/jQuery。
  • li 是浮动的，所以没有硬编码的 nth-child。
  • 代码是自动生成的，因此无法添加/删除自定义类。

我尝试使用 :not(class2), [class2] :first-child & :first-of-type 但无济于事。

谢谢！

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

4

3 回答 3

12

您应该能够.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/

于 2013-04-04T15:10:19.120 回答
5

如果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 的答案）作为解决方法。

于 2013-04-04T15:06:47.793 回答
0

试试这个

li:first-child
{
...
}

这仅适用于 1 级

li.class1:first-child
{
color:#ff0000;
}

这是一个小提琴

如果您不希望 class2 的列表受到影响，也许这对您有用

    li.class1.class2:first-child
    {
        ...
        code that will reset
    }
于 2013-04-04T15:02:07.403 回答