js选择器中:nth-of-child和:nth-of-type的区别

异同点：

1、两者都是找第y个元素

2、前者是同级全部元素的第y个，后者是指定元素的第y个

简单描述

同级的多个元素，第y个是xx元素即xx:nth-child(y) 和 第y个xx元素 xx:nth-of-type(y) ；

详细补充：

 xx:nth-child(y)，指和xx同级的【全部元素】,对【全部元素】从1排序，第y个是xx则匹配。
伪代码:若元素aaba ， 第3个是b， 则 b:nth-child(3)  匹配到   
分析：和b同级的【第3个是b】匹配到  （全部元素的第3个是b）

xx:nth-of-type(y) ,指和xx同级的【xx元素】，对【xx元素】从1排序，第y个是xx则匹配。
伪代码：若元素 aabbba,和b同级很多，但b只有3个，第3个b匹配到  b:nth-of-type(3)
分析：和b同级的【第3个b】匹配到    （第3个b）

上述2中类型都涉及第几个，注意是在同一父元素下。
document.body.querySelectorAll("span:nth-child(2)")  //可能返回多个符合,不同父元素