可以使用CSS3选择器:first-of-type
来选择具有给定类名的第一个元素吗?我的测试没有成功,所以我想是不是?
代码():
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
发布于 2011-06-23 06:00:04
不,只使用一个选择器是不可能的。:first-of-type
伪类选择其类型 (div
、p
等)的第一个元素。将类选择器(或类型选择器)与该伪类一起使用意味着,如果元素具有给定的类(或属于给定的类型)并且是其兄弟元素中的第一个类型,则选择该元素。
不幸的是,CSS没有提供只选择类的第一个匹配项的:first-of-class
选择器。作为一种解决方法,您可以使用类似以下内容:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
发布于 2013-10-20 13:09:37
草案CSS选择器级别4建议在:nth-child
selector中添加of <other-selector>
语法。这将允许您挑选出与给定的其他选择器匹配的_n_th子项:
:nth-child(1 of p.myclass)
以前的草案使用了一个新的伪类:nth-match()
,因此您可能会在该功能的一些讨论中看到该语法:
:nth-match(1 of p.myclass)
它现在已经是implemented in WebKit,因此可以在Safari中使用,但它似乎是the only browser that supports it。已经提交了实现Blink (Chrome)、Gecko (Firefox)和request to implement it in Edge的门票,但这些都没有明显的进展。
发布于 2017-05-18 07:14:20
这使得使用:first-of-type选择器 CSS3来选择具有给定类名的第一个元素是不可能的。
但是,如果目标元素有前一个元素同级元素,则可以组合negation CSS pseudo-class和adjacent sibling selectors,以匹配不立即有前一个具有相同类名的元素的元素:
:not(.myclass1) + .myclass1
完整的工作代码示例:
p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
https://stackoverflow.com/questions/6447045
复制相似问题