css伪类选择器:first-child与:first-of-type的区别

css中有两个非常类似但又不尽相同的选择器，伪类:first-child和:first-of-type

A B:first-child  : 父元素A中的第一个元素，如果该元素是B则匹配成功，为有效选择器，如该元素不为B，则为无效选择器。
A B:first-of-type: 父元素A中的第一个B元素，B不一定是父元素A中的第一个元素。

下面根据网上的一个例子来说明，先上代码：

<div>
	<p>第一个子元素</p>
	<h1>第二个子元素</h1>
	<span>第三个子元素</span>
	<span>第四个子元素</span>
</div>

p:first-child: 匹配到p元素，因为p元素是div中的第一个元素
h1:first-child:匹配不到任何元素，因为h1是div中的第二个元素，不是第一个。
span:first-child：匹配不到任何元素，因为两个span都不是div中的第一个元素。
:first-child 匹配到是p元素，因为这里div的第一个元素就是p

p:first-of-type: 匹配到p元素，因为只有一个p元素
h1:first-of-type:匹配到h1元素，因为只有一个h1元素
span:first-of-type：匹配到第一个span元素，因为这里有两个span元素，因此只匹配第一个
:first-of-type: 匹配到的是p元素

同理：:nth-child也是这个原理，先来个例子

<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
    <span>第2个span</span>
    <p>第4个p</p>
    <p>第5个p</p>
</div>

p:nth-child(3)则匹配不到任何元素，而用p:nth-child(4)则匹配到第3个p元素。

参考：
https://www.cnblogs.com/xuan52rock/p/4416228.html
https://www.cnblogs.com/jiangzilong/p/5776905.html