在css选择器中:first-child与:first-of-type的用法

  ':first-child' 选择器是css2中的选择器，只匹配一个元素，而此选择符将为每个父元素匹配一个子元素例：

<div>
<h1>测试1</h1>
<p>测试2</p>
<p>测试3</p>
<span>测试4</span>
</div>

  其中：first-child 找到的是h1元素，因为h1是div中的第一个元素；

       p:first-child 找不到任何元素，因为他处在div中第二三位，span：first-child同理。

  ':first-of-type' 选择器是css3中的选择器，匹配的是该类型的第一个，例：

<div>
<h1>测试1</h1>
<p>测试2</p>
<p>测试3</p>
<span>测试4</span>
</div>

其中 :first-of-type 找到的是h1元素，因为h1是div中的第一个元素 也是仅有的h1元素；

p:first-of-type 找到的是第一个p元素（测试2），因为p元素在div中有两个所以通过p:first-of-type找到是第一个p，span同理。

通过两者的比较可以很容易看出两者的不同，同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也是同理。