将样式应用于一行相似元素中的第一个元素

Question

我有以下列表（数字仅供参考）

<div class="A">alpha1</div>
<div class="B">alpha2</div>
<div class="A">alpha3</div>
<div class="A">alpha4</div>
<div class="A">alpha5</div>
<div class="B">alpha6</div>
<div class="A">alpha7</div>

我想对 DIVS 1、3 和 7 应用一种样式，因为它们是同一类的一行元素中其类 (A) 的第一个。我可以使用伪元素/魔法吗？类似（发明）的东西

not(.A) & .A {color:red} -> if class is A and it is not preceded by an A

谢谢！

Answer 1

您可以将:not()伪类与相邻的同级组合器一起使用+来匹配前面.A没有紧接的.A：

:not(.A) + .A

您还需要使用:first-child选择第一个.A元素，因为它前面没有任何内容：

.A:first-child

将它们结合起来，你就得到了：

:not(.A) + .A, .A:first-child { color: red; }

jsFiddle 演示