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

CSS selector to select first element of a given class

提问by Marius S.

I'm trying to select a first element of class 'A' in an element with id or class 'B'. I've tried a combination of > + and first-child selectors, since it's not a first element inside class element 'B'. It worked, but ... i'm trying to override some default css and i have no control over the server side and it seems that the class 'A' element is sometimes generated in a different position. Here's an illustration:

我试图在具有 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>

Sometimes the name of the class 'B' differs and the elements before 'A' differ as well. So is there any way to select the first occurrence of 'A' in an element 'C'? Because class 'C' is always there. I can't use + > and first-child selectors since the path to first 'A' element differs, but element 'C' is always there and it would be a nice starting point.

有时“B”类的名称不同，“A”之前的元素也不同。那么有没有办法选择元素'C'中第一次出现的'A'？因为“C”类始终存在。我不能使用 + > 和 first-child 选择器，因为第一个 'A' 元素的路径不同，但元素 'C' 始终存在，这将是一个不错的起点。

回答by BoltClock

CSS3 provides the :first-of-typepseudo-class for selecting the first element of its type in relation to its siblings. However it doesn't have a :first-of-classpseudo-class.

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

As a workaround, if you know the default styles for your other .Aelements, you can use an overriding rule with the general sibling combinator ~to apply styles to them. This way, you sort of "undo" the first rule.

作为一种解决方法，如果您知道其他.A元素的默认样式，则可以使用具有通用同级组合器的覆盖规则~来将样式应用于它们。这样，您就可以“撤消”第一条规则。

The bad news is that ~is a CSS3 selector.
The good news is that IE recognizes it starting from IE7, like CSS2's >, so if you're worried about browser compatibility, the only "major browser" this fails on is IE6.

坏消息是这~是一个 CSS3 选择器。
好消息是 IE 从 IE7 开始识别它，就像 CSS2 一样>，所以如果你担心浏览器兼容性，唯一失败的“主要浏览器”是 IE6。

So you have these two rules:

所以你有这两个规则：

.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.
     */
}

How styles are applied to elements is illustrated below:

样式如何应用于元素如下图所示：

<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. This element does not have class A. No rules are applied.

2. This element has class A, so the first rule is applied. However it doesn't have any other such elements occurring before it, which the ~selector requires, so the second rule is notapplied.

3. This element has class A, so the first rule is applied. It also comes after other elements with the same class under the same parent, as required by ~, so the second rule is also applied. The first rule is overridden.

1. 此元素没有 class A。不应用任何规则。

2. 此元素具有 class A，因此应用第一条规则。然而，它之前没有任何其他此类元素出现，这是~选择器所需的，因此不应用第二条规则。

3. 此元素具有 class A，因此应用第一条规则。根据 的要求~，它也位于同一父级下具有相同类的其他元素之后，因此也应用了第二条规则。第一条规则被覆盖。