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

前端之家收集整理的这篇文章主要介绍了CSS选择器来选择给定类的第一个元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在id或class’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”总是在那里,这将是一个很好的起点。

谢谢您的帮助

解决方法

CSS3提供了:第一个类型的伪类,用于选择与其兄弟姐妹相关的其类型的第一个元素。但是它没有一个类的第一类伪类。

作为解决方法,如果您知道其他.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相关文章