css中nth-child()与nth-of-type()区别

nth-child()

dom.nth-child(n) 表示选中dom的父级元素中的第n个dom元素，若匹配，则选中，否则，不选中。


上面例子可以看出：

• p:nth-child(1) ：拿出p元素的父级元素div中的第一个子元素，对比是p元素，选中。
• p:nth-child(2) ：拿出p元素的父级元素div中的第二个子元素，对比是p元素，不是p元素，是span，则不选中。
• p:nth-child(3) ：拿出p元素的父级元素div中的第三个子元素，对比是p元素，选中。
• span:nth-child(2) ：拿出p元素的父级元素div中的第二个子元素，对比是span元素，选中。

nth-of-type()

nth-of-type(n)用于匹配父元素下使用同种标签的第n项子元素。


上面例子可以看出：

• p:nth-of-type(1)：拿出p元素的父级元素div中的第一个p元素，选中。
• p:nth-of-type(2)：拿出p元素的父级元素div中的第二个p元素，选中。
• span:nth-of-type(1)：拿出span元素的父级元素div中的第一个span元素，选中。
• span:nth-of-type(2)：拿出span元素的父级元素div中的第二个span元素，选中。

标签名:nth-of-type()是一种非常靠谱的使用模式，基本上不会遇到什么问题，但是当使用class:nth-of-type()时，情况就不一样了。


发现：

当解析到.child:nth-of-type(2)时，浏览器一开始并不知道要选择的元素类型是什么，它会先找到.child这个类名，找到.child之后得知p元素和span都拥有这个class，所以此时浏览器就知道了它要从p元素和span元素里面同时去匹配，就变成了p.child:nth-of-type(2)，span.child:nth-of-type(2)找到了第二个p元素以及第二个span元素，通过判断它们有没有.child类名，有就匹配到该元素，没有则匹配不到该元素。