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

Question

我试图在id或类'B'的元素中选择类'A'的第一个元素.我尝试过> +和first-child选择器的组合,因为它不是类元素'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"是永远存在的,这将是一个很好的起点.

Answer 1

CSS3提供了:first-of-type伪类,用于选择与其兄弟相关的类型的第一个元素.但是它没有:first-of-class伪类.

作为一种解决方法,如果您知道其他.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>

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

2. 此元素具有类A,因此应用了第一个规则.但是,它在~选择器需要之前没有任何其他此类元素出现,因此不应用第二个规则.

3. 此元素具有类A,因此应用了第一个规则.它也出现在同一父级下具有相同类的其他元素之后~,因此第二个规则也适用.第一条规则被覆盖.