将样式应用于类似元素的一行中的第一个元素 [英] Apply style to first element in a row of similar elements

问题描述

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

I have the following list (the numbers are just for reference)

<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）在同一行的元素中。有伪元素/魔法，我可以使用吗？ （发明）

I want to apply one style to DIVS 1, 3 and 7, because they are the first of their class (A) in a row of elements of the same class. Is there a pseudo element / magic I can use for that? Something like (inventing)

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

谢谢！

推荐答案

您使用具有相邻兄弟组合器的：not（）伪类 c>。 c> c> ：

You use the :not() pseudo-class with an adjacent sibling combinator + to match an .A that is not immediately preceded by an .A:

:not(.A) + .A

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

You'll also need to use :first-child to select the very first .A element since it's not preceded by anything:

.A:first-child

将它们组合，您有：

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

jsFiddle演示

这篇关于将样式应用于类似元素的一行中的第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！