用于选择给定类的第一个元素的CSS选择器
用于选择给定类的第一个元素的CSS选择器
提问于 2010-09-01 14:29:31
我正在尝试在具有id或类'B‘的元素中选择类'A’的第一个元素。我尝试了>+和第一子选择器的组合，因为它不是class元素'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’总是在那里，这将是一个很好的起点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-09-01 14:37:28
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的applied. - This元素，因此应用了第一个规则。但是，它之前没有出现任何其他这样的元素，这是类选择器所要求的，所以第二条规则是
A，所以应用了第一条规则。根据~的要求，它也出现在同一父元素下具有相同类的其他元素之后，因此第二个规则也适用。第一条规则将被覆盖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3615518
复制相关文章
相似问题