我正在尝试在具有 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”始终存在,这将是一个不错的起点。
最佳答案
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 选择器选择给定类的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3615518/