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

问题描述

我试图在id或类'B'的元素中选择类'A'的第一个元素。我试过一个> +和第一个子选择器的组合，因为它不是类元素'B'中的第一个元素。它工作，但...我试图重写一些默认的CSS，我没有控制服务器端，似乎类'A'元素有时生成在不同的位置。这里有个例子：

 < class-C& 
< class-B>可能有不同的名称
< some-other-classes>结构和元素计数可能不同
< class-A>< / class-A>我们的目标
< class-A>< / class-A>这不应该受到影响
< class-A>< / class-A>这不应该受到影响
< / class-B> 
< / class-C> 
  

有时，类'B'的名称不同，'A'之前的元素也不同。所以有什么办法选择第一次出现'A'在元素'C'吗？因为类'C'总是存在。我不能使用+>和第一个子选择器，因为第一个'A'元素的路径不同，但元素'C'总是存在，这将是一个很好的起点。

感谢您的帮助

解决方案

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

你知道你的其他 .A 元素的默认样式，你可以使用一般同胞组合器的重写规则〜以向他们应用样式。这样，你可以撤消第一条规则。

坏消息是〜是一个CSS3选择器。

好​​消息是，IE从IE7开始识别它，如CSS2的> ，所以如果你担心浏览器兼容性，只有主要浏览器，这个失败的是IE6。

所以你有这两个规则：

  .C> *> .A {
 / * 
 *样式每个.A是.C的孙子。 
 *这是你正在寻找的元素。 
 * / 
} 
 
 .C> *> .A〜.A {
 / * 
 *只适用于每个元素的第一个.A子元素
 *后的.A元素，它是.C的子元素。 
 *您需要在此处手动恢复/撤消上述规则中的样式。 
 * / 
} 
  

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

 < div class =C> 
<！ -  
在问题中，这个元素可能有一个非B类。
因此上面的中间'*'选择器（我不知道什么标签是）。 
  - > 
< div class =B> 
< div class =E>内容< / div> <！ -  [1]  - > 
< div class =F>内容< / div> <！ -  [1]  - > 
< div class =A>内容< / div> <！ -  [2]  - > 
< div class =A>内容< / div> <！ -  [3]  - > 
< / div> 
< div class =D> 
< div class =A>内容< / div> <！ -  [2]  - > 
< div class =E>内容< / div> <！ -  [1]  - > 
< div class =F>内容< / div> <！ -  [1]  - > 
< div class =A>内容< / div> <！ -  [3]  - > 
< / div> 
< / div> 
  

1. 此元素没有类 A 。




2. 此元素具有类 A ，因此应用第一个规则。然而，它没有任何其他这样的元素之前发生，〜选择器要求，因此第二个规则是不应用。 p>




3. 此元素具有类 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>

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 occurence 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.

Thanks for the help

解决方案

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.

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.

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.

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

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.

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