CSS3提供了:first-of-type
伪类,用于相对于其兄弟对象选择其类型的第一个元素。但是,它没有:first-of-class
伪类。
解决方法是,如果您知道其他.A
元素的默认样式,则可以将覆盖规则与常规同级组合器~
一起使用,以将样式应用于它们。这样,您可以“撤消”第一条规则。
坏消息是这~
是一个CSS3选择器。 好消息是IE可以像CSS2一样从IE7开始识别它>
,因此,如果您担心浏览器的兼容性,唯一失败的“主要浏览器”就是IE6。
因此,您有以下两个规则:
.C > * > .A {
/*
* Style every .A that's a grandchild of .C.
* This is the element you're looking for.
*/
}
.C > * > .A ~ .A {
/*
* Style only the .A elements following the first .A child
* of each element that's a child of .C.
* You need to manually revert/undo the styles in the above rule here.
*/
}
下面说明了如何将样式应用于元素:
<div class="C">
<!--
As in the question, this element may have a class other than B.
Hence the intermediate '*' selector above (I don't kNow what tag it is).
-->
<div class="B">
<div class="E">Content</div> <!-- [1] -->
<div class="F">Content</div> <!-- [1] -->
<div class="A">Content</div> <!-- [2] -->
<div class="A">Content</div> <!-- [3] -->
</div>
<div class="D">
<div class="A">Content</div> <!-- [2] -->
<div class="E">Content</div> <!-- [1] -->
<div class="F">Content</div> <!-- [1] -->
<div class="A">Content</div> <!-- [3] -->
</div>
</div>
该元素没有class A
。没有规则适用。
该元素具有class A
,因此将应用第一个规则。但是,~
选择器不需要在它之前发生任何其他此类元素,因此第二条规则 适用。
该元素具有class A
,因此将应用第一个规则。根据的要求~
,它也位于同一父项下具有相同类的其他元素之后,因此第二条规则也适用。第一条规则被覆盖。