CSS3 选择器 :first-of-type with class name?

Question

是否可以使用 CSS3 选择器 :first-of-type 来选择具有给定类名的第一个元素？我没有通过我的测试，所以我认为它不是？

代码(http://jsfiddle.net/YWY4L/):

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、 ETC)。将类选择器(或类型选择器)与该伪类一起使用意味着选择一个元素，如果它具有给定的类(或属于给定的类型)并且是其类型中的第一个 sibling 。

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

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

给出了解决方法的解释和插图 here和 here .