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

问题描述

我有以下列表(数字仅供参考)

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() 伪类和相邻的兄弟组合 + 来匹配一个.A 前面没有紧跟 .A:

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

把它们结合起来，你就有了:

Combine them, and you have:

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

jsFiddle 演示

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