css – 将样式应用于一行类似元素中的第一个元素

前端之家收集整理的这篇文章主要介绍了css – 将样式应用于一行类似元素中的第一个元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下列表(这些数字仅供参考)
<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

谢谢!

解决方法

您使用:not()伪类与相邻的兄弟组合子匹配.A之前没有.A:
:not(.A) + .A

你还需要使用:first-child来选择第一个.A元素,因为它之前没有任何东西:

.A:first-child

结合它们,你有:

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

jsFiddle demo

原文链接:https://www.f2er.com/css/217711.html

猜你在找的CSS相关文章