CSS选择器以选择给定类的第一个元素

CSS选择器以选择给定类的第一个元素

CSS3提供了

:first-of-type

伪类，用于相对于其兄弟对象选择其类型的第一个元素。但是，它没有

:first-of-class

伪类。

解决方法是，如果您知道其他

.A

元素的默认样式，则可以将覆盖规则与常规同级组合器

~

一起使用，以将样式应用于它们。这样，您可以“撤消”第一条规则。

坏消息是这

~

是一个CSS3选择器。
好消息是IE可以像CSS2一样从IE7开始识别它

>

，因此，如果您担心浏览器的兼容性，唯一失败的“主要浏览器”就是IE6。

因此，您有以下两个规则：

.C > * > .A {    }.C > * > .A ~ .A {    }

下面说明了如何将样式应用于元素：

<div >    <!--    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 >        <div >Content</div> <!-- [1] -->        <div >Content</div> <!-- [1] -->        <div >Content</div> <!-- [2] -->        <div >Content</div> <!-- [3] -->    </div>    <div >        <div >Content</div> <!-- [2] -->        <div >Content</div> <!-- [1] -->        <div >Content</div> <!-- [1] -->        <div >Content</div> <!-- [3] -->    </div></div>

1. 该元素没有class

   A

   。没有规则适用。

2. 该元素具有class

   A

   ，因此将应用第一个规则。但是，

   ~

   选择器不需要在它之前发生任何其他此类元素，因此第二条规则 不 适用。

3. 该元素具有class

   A

   ，因此将应用第一个规则。根据的要求

   ~

   ，它也位于同一父项下具有相同类的其他元素之后，因此第二条规则也适用。第一条规则被覆盖。