Question

我正在尝试在id或类'B'的元素中选择类'A'的第一个元素。我尝试过＆gt;的组合+和第一个子选择器，因为它不是类元素'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'级总是在那里。我不能用+＆gt;和第一个子选择器，因为第一个'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>

此元素没有类A。没有规则适用。
此元素具有类A，因此应用了第一个规则。但是，~选择器需要它之前没有任何其他此类元素出现，因此第二个规则是不应用。
此元素具有类A，因此应用了第一个规则。它也出现在~所要求的同一父级下具有相同类的其他元素之后，因此第二条规则也适用。第一条规则被覆盖。

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

1 个答案: