CSSselect器来select给定类的第一个元素

我试图在id或class为'B'的元素中select类“A”的第一个元素。 我试过> +和第一个子select器的组合，因为它不是类元素“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”中select“A”的第一个出现？ 因为“C”类总是在那里。 由于第一个“A”元素的path不同，我不能使用+>和第一个孩子select器，但是元素“C”总是在那里，这将是一个不错的起点。

谢谢您的帮助

Answer 1

CSS3提供了:first-of-type伪类，用于select与其兄弟types相关的第一个types的元素。 但是它没有:first-of-class伪类。

作为一种解决方法，如果您知道其他.A元素的默认样式，则可以使用覆盖规则与常规兄弟组合符~来为其应用样式。 这样，你就可以“撤消”第一条规则。

坏消息是~是一个CSS3select器。
好消息是，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> 

1. 这个元素没有class A 没有规则适用。

2. 这个元素具有类A ，所以应用了第一个规则。 然而它没有任何其他的这样的元素出现在~select器需要的地方，所以第二个规则不适用。

3. 这个元素具有类A ，所以应用了第一个规则。 它也是根据~所要求的，在同一个父类中具有相同类的其他元素，所以第二个规则也适用。 第一条规则被覆盖。