:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
<div>
<p>我是p标签</p>
<span>我是span标签</span>
<a>我是a标签</span>
</div>在这段代码中，如果使用p:first-child 和 p:first-of-type都能成功选择到p标签。
而如果选择span:first-of-type也可以获取到span标签，因为span标签是div中的span类型中的第一个标签。
span:first-child则无法选择到任何标签,因为span的父元素为div，div的第一个元素(first-child)是p标签而不是span标签
只有span标签为父元素的第一个标签才能选择到此标签。
同理a标签也是如此。
<style>
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body>p标签的父元素是body，虽然第一个p标签并不是body的第一个子元素，但是第一段落的p标签是所有p标签中的第一个，第一个段落的的p标签会有背景颜色，而要是换成p:first-child则第一个p标签的背景颜色不生效。
同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。