CSS选择器选择给定类的第一个元素 [英] CSS selector to select first element of a given class

问题描述

我正在尝试在具有 id 或类B"的元素中选择A"类的第一个元素.我尝试了 > + 和第一个子选择器的组合，因为它不是类元素B"中的第一个元素.它起作用了，但是......我正在尝试覆盖一些默认的css，我无法控制服务器端，似乎'A'类元素有时会在不同的位置生成.这是一个插图:

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:

<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"始终存在，这将是一个不错的起点.

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.

推荐答案

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

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

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

As a workaround, if you know the default styles for your other .A elements, 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.

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

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.

所以你有这两条规则:

.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. 该元素没有类A.没有应用任何规则.

这个元素的类是A，所以应用了第一条规则.但是，它之前没有任何其他此类元素出现，这是 ~ 选择器需要的，因此第二条规则not应用.

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 not applied.

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

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.

这篇关于CSS选择器选择给定类的第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！