問題描述
我有以下列表(數字僅供參考)
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模板網！