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

我试图在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可以像CSS2一样从IE7开始识别它>,因此,如果您担心浏览器的兼容性,唯一失败的“主要浏览器”就是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>

  1. 该元素没有class A。没有规则适用。

  2. 该元素具有class A,因此将应用第一个规则。但是,~选择器不需要在它之前发生任何其他此类元素,因此第二条规则 适用。

  3. 该元素具有class A,因此将应用第一个规则。根据的要求~,它也位于同一父项下具有相同类的其他元素之后,因此第二条规则也适用。第一条规则被覆盖。

以上是 CSS选择器以选择给定类的第一个元素 的全部内容, 来源链接: utcz.com/qa/435884.html

回到顶部