nth-child()和nth-of-type的区别

nth-child()和nth-of-type都是伪类选择器
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
p:nth-of-type(2) 选择属于其父元素第二个p元素的每个p 元素。
这是摘自W3School对这两个选择器的解释，都是找父元素上的子元素，但是区别就很大了。
要搞清楚两个的区别就需要理解两个的用法
下面为我为了区别两个选择器所写的案例


对比A、B两块代码我们可以看出这两个地方都是找father元素下的子元素，而最后背景色为蓝色也让我们能理解nth-child(n)了，找到father元素下的第2个子元素，且这个子元素为p元素。
.father li:nth-of-type(2)就是首先找到father这个父元素，然后找到他所有子元素下的所有li子元素的第二个就是这个黄色背景色li元素了,此时，就是将li元素分为了一组，然后在里面找
这两个伪类选择器也是我们经常使用到的，清楚的理解了用法就能更加熟练的运用。