nth-child和nth-of-type

nth-child取到的是一个大容器下的所有子集，从第一个开始排列，此时p:nth-child(1)取到的实际上是H2,所以设置的样式不会生效。

p:nth-of-type(1)才会取到第一个p标签，是从p这个类型开始计算

nth-child(2)取到的元素

nth-of-type(2)取到的元素

.item 包含p和span 所以两类分别计算，取nth-of-type(3)

first-child和 first-of-type区别和上述一样

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。