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

Question

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

Answer 1

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

不幸的是，CSS没有提供:first-of-class仅选择类的首次出现的选择器。解决方法是，可以使用以下方法：

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

此处和此处都提供了解决方法的说明和图示。