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是标签优先的，就是找对应的标签进行遍历，感觉后者更实用些把。