CSS3选择器：类名的第一个类型？

小编典典

CSS3选择器：类名的第一个类型？

all

是否可以使用 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>

阅读 80

2022-04-27

共1个答案

小编典典

不，仅使用一个选择器是不可能的。:first-of-type伪类选择其类型
的第一个元素（div、p等）。使用带有该伪类的类选择器（或类型选择器）意味着选择一个元素，如果它具有给定的类（或属于给定的类型）并且
是其兄弟元素中的第一个类型。

不幸的是，CSS 没有提供:first-of-class只选择第一次出现的类的选择器。作为一种解决方法，您可以使用以下方法：

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

此处和此处给出了解决方法的说明和插图。

2022-04-27