CSS3选择器:使用类名的第一个类型？
可以使用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>
回答 10
Stack Overflow用户
发布于 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 */; }Stack Overflow用户
发布于 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的门票，但这些都没有明显的进展。
Stack Overflow用户
发布于 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
复制相似问题