以前对 CSS3 选择器理解的不准确。比如 :first-child 伪类。如果有这么一个代码片段:

1
2
3
4
5
<div>
    <h1></h1>
    <h2></h2>
    <h2></h2>
</div>

给出一个组合选择器

1
div h2:first-child{}

能不能匹配到第一个 h2 呢?
答案是不能。因为 h2 不是 div 元素的第一个子元素。这个伪类选择器只适用于 h2 是第一个子元素的情况,如果 h2 不是第一个子元素,它什么都匹配不到。W3C 官网是这么介绍的:

The :first-child pseudo-class represents an element that is the first child of some other element.

并且明确的给出了两个例子:

This selector can represent the p inside the div of the following fragment:

1
2
3
4
<p> The last P before the note.</p>
<div class="note">
   <p> The first P inside the note.</p>
</div>

but cannot represent the second p in the following fragment:

1
2
3
4
5
<p> The last P before the note.</p>
<div class="note">
   <h2> Note </h2>
   <p> The first P inside the note.</p>
</div>

去 W3C 官网查看例子

那么,如果想实现匹配不是第一子元素的一组 h2 中的第一个,应该用那个选择器呢?
要用 :first-of-type 伪类。
W3C 官网给出的介绍:

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

去 W3C 官网查看例子

因为
:first-child 和 :last-child 是 :nth-child() 的特例。
:first-of-type 和 :last-of-type 是 :nth-of-type() 的特例。
所以这几个伪类的用法是一样的。