':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) 也是同理。