CSS first-child 和 first-of-type 的区别

• p:first-child：选择的是该 p 元素所在的父元素的第一个子元素，且其为 p 元素时生效
• p:first-of-type：选择的是该 p 元素所在的父元素的第一个子 p 元素

直接上例子： 

​p:first-child {
  background-color: gold;
}
...
<div>
  <p>1111</p>
  <span>2222</span>
</div>

此处 p 元素的父元素 div 的第一个子元素为 p，那么代码生效，效果为：

 而如果是这样子的：

span:first-child {
  background-color: red;
}
...
<div>
  <p>1111</p>
  <span>2222</span>
</div>

那么红色背景不会生效，因为 span 元素的父元素 div 的第一个子元素不是 span

使用 first-of-type 的情况：

span:first-of-type {
  background-color: red;
}
...
<div>
  <p>1111</p>
  <span>2222</span>
</div>

选中 span 元素的父元素的第一个子 span 元素