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

有时候,开发者在使用nth-of-type或者nth-child对样式进行控制,但是这两者有什么区别吗?应该怎么选择呢?看下面的两张图片
nth-of-type和nth-child的区别

nth-of-type和nth-child的区别
两张图片就只有一个区别,第一张图是通过nth-of-type进行控制的,而第二张图是通过nth-child进行控制的,结果后者没有生效。
解释:
nth-child并不会识别标签类型,我想控制页面中的第一个div,但是显然在body标签中第一个标签是h1并不是div,所以就被直接忽略了,而nth-of-type在遍历的时候是识别标签类型的,它只会找同类型的标签进行遍历,nth-child是子元素优先的,类型不对样式就不起效果了,nth-of-type是标签优先的,就是找对应的标签进行遍历,感觉后者更实用些把。