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

Question

我试图在 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”始终存在，这将是一个很好的起点。

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

   ，因此应用第一条规则。然而，它之前没有出现任何其他此类元素，这是

   ~

   选择器所需要的，因此第二条规则是 not 应用。

3. 该元素具有类

   A

   ，因此应用第一条规则。根据

   ~

   的要求，它也位于同一父级下具有相同类的其他元素之后，因此也适用第二条规则。第一条规则被覆盖。

Answer 2

现在使用 :not() +

~

选择器，

可能

是可能的。

.A:not(.A ~ .A) {
  color: red;
}

<div class="C">
  <div class="B">
    <div class="E">Content</div>
    <div class="F">Content</div>
    <div class="A">Target</div>
    <div class="A">Content</div>
  </div>
  <div class="D">
    <div class="A">Target</div>
    <div class="E">Content</div>
    <div class="F">Content</div>
    <div class="A">Content</div>
  </div>
</div>