在CSS2版本中，有 p:first-child这么一个选择器，w3school里解释的是：

选择属于父元素的第一个子元素的每个 <p> 元素。

有点绕，大概的意思是：“选择容器下面子元素的第一个<p>元素”，如下：

<div>
    <p>1</p>
    <p>2</p>
</div>

此时，div p:first-child 选择的是内容为 1 的 p 元素，相对的 div p:last-child 选择最后一个 p 元素，在本例中选择的是内容为 2 的元素。然而这里面有一个坑，在w3school中也没有指出，如下：

<div>
    <span>span</span>
    <p>1</p>
    <p>2</p>
</div>

此时，div p:first-child 无法选择任何元素，原因是 div 容器下，第一个子元素不是 p 元素。由此可见，p:first-child 选择器的概念应该是：

选择属于父元素的子元素的第一个 p 元素，如果第一个子元素不是 p ，那么将不选择任何元素。

在CSS3版本中，新增了 nth-child选择器，用法和 first-child 基本一样：

<div>
    <p>1</p> <!--div p:nth-child(1)-->
    <p>2</p> <!--div p:nth-child(2)-->
</div>

<div>
    <span>span</span> <!--div span:nth-child(1)-->
    <p>1</p> <!--div p:nth-child(1)-->>
    <p>2</p> <!--div p:nth-child(2)-->
</div>

既然说到了 first-child，就不能不提一下 first-of-type，和first-child一样，同样是选择第一个子元素，那么差异在哪？

<div>
    <p>1</p>
    <p>2</p>
</div>

此例中，first-child和first-of-type的效果一致。

<div>
    <span>span</span>
    <p>1</p>
    <p>2</p>
</div>

此例中，p:first-child是无效的选择器，而p:first-of-type将选择内容为 1 的p元素，所以 first-of-type 可以定义为：

选择容器下子元素的 指定类型 的 第一个 元素。

CSS3中的nth-of-type用法基本一致，参见上文的nth-child。