一、概念
A>B : first-child ： 父元素下的第一个子元素
为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效
A > B:first-of-type： 父元素下的某个类型的第一个子元素
为A标签的孩子们中，第一个为B标签（B标签是A的孩子，但不一定是A的第一个孩子）设置样式，若A标签的孩子中有B标签，则设置成功，否则（A的孩子中没有B标签），则失败，即改CSS不生效
不同之处：
first-child强调的是父元素中的第一个元素，并不关心其类型；first-of-type强调的是①必须为子元素②必须是某个类型③第一个
二、代码实践 - 给第一段加上红色背景
1、<p/>标签刚好是<div>中的第一个child
使用first-child：
使用first-of-type：
结论：
当设置标签的类型在父元素中存在，且是父元素中的第一个元素时，first-child和first-of-type效果相同；
2、<p/>标签不是<div>中的第一个child
使用first-child：
分析：
由于test的第一个child不是<p/>，所以不生效；
使用first-of-type：
分析：
</p>为test的child，并且“截图中下划线”是test的child的第一个child，所以生效；
结论：
当<p/>不是<div/>第一个child时，要是想要给<div/>中第一个<p/>设置样式时，必须使用first-of-type
三、总结
当需要设置元素是父元素的第一个child时，first-of-type 和first-child效果一致；当需要设置元素不是父元素的第一个child时，需要用first-of-type.