这两个选择器都是作用于子类。
div :nth-child(n) 可以这样表明，不需要在:nth-child()前面接标签名。表示意思是，直接选取当前div下 n个子元素（即所有子元素）。
在:nth-child 前面接选择器仅仅是对nth-child进行进一步筛选。
例如：
div p:nth-child(2) 表达意思是： 选取div标签下第二个子元素，然后判断当前子元素是不是p标签，如果是，则样式作用到p标签上。否则，将不会作用上。
:nth-of-type, 则与之有些不同。
它是直接作用到子元素类型，然后判断它是第几个，如果满足，则生效。
例如：
div p:nth-of-type(2) 表达意思是：选取div下的p标签，然后判断这个p标签是不是这个div里面的第二个p元素，如果是，则生效。
例子：
<div>
<p>first</p>
<span>s1</span>
<span>s2</span>
<span>s3</span>
<p>second</p>
</div>
希望您能实际去使用下，这样才能理解这两个伪类选择器之间的不同。