伪类nth-child和nth-of-type的区别

在学习伪类nth-child和nth-of-type的时候，这两个概念容易混淆，这里给出例子，可以很容易分辨：

共同点：n 可以是数字、关键词或公式（n > 0）
nth-child(2) 表示其父元素的第二个子元素
nth-child(2n) 或 nth-child(even) 表示其父元素的第偶数个子元素
nth-child(2n-1) 或 nth-child(odd) 表示其父元素的第奇数个子元素

不同点：
/这里选择的是第二个子元素，是p才会匹配生效/
p:nth-child(2) {
background: skyblue;
}
/这里选择是第二个p元素，它会从上往下找，找到第二个p才会生效/
p:nth-of-type(2) {
background: pink;
}