我正在尝试在具有 id 或类“B”的元素中选择“A”类的第一个元素。我尝试了 > + 和第一个子选择器的组合，因为它不是类元素“B”中的第一个元素。它起作用了，但是......我正在尝试覆盖一些默认的css并且我无法控制服务器端，并且似乎’A’类元素有时会在不同的位置生成。这是一个插图：
<class-C> <class-B> might have a different name <some-other-classes> structure and element count might differ <class-A></class-A> our target <class-A></class-A> this shouldn't be affected <class-A></class-A> this shouldn't be affected </class-B> </class-C>
有时类“B”的名称不同，“A”之前的元素也不同。那么有什么方法可以选择元素“C”中第一次出现的“A”？因为’C’类总是在那里。我不能使用 + > 和第一个子选择器，因为第一个“A”元素的路径不同，但元素“C”总是在那里，这将是一个很好的起点。
CSS3 提供了:first-of-type伪类，用于选择与其同级相关的类型的第一个元素。但是它没有:first-of-class伪类。
:first-of-type
:first-of-class
作为一种解决方法，如果您知道其他.A元素的默认样式，则可以使用带有通用兄弟组合器的覆盖规则~来将样式应用于它们。这样，您就可以“撤消”第一条规则。
.A
~
坏消息是这~是一个 CSS3 选择器。 好消息是 IE 从 IE7 开始识别它，就像 CSS2 一样>，所以如果你担心浏览器兼容性，唯一失败的“主要浏览器”是 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>
A
