nth-of-type(2)和nth-child(2)的区别

<div class="test">
　　<p>A元素</p>
　　<div>B元素</div>
　　<p>C元素</p>
　　<p>D元素</p>
</div>

看下面的代码

$("p:nth-of-type(2)")//选择的是C元素

$("p:nth-child(2)")//什么元素也没选中

两者比较：

• 这里p:nth-of-type(2)选择器选择父元素的第二个段落p元素 ，它不管段落p元素在什么位置，段落p元素可能是该父级元素的第3个或者第5个，也可以是第n个子元素，这里n肯定大于2，只要父级元素<div class="test">有两个以上的段落p子元素，他就肯定能选择到第二个段落p元素。
• 这里p:nth-child(2)选择器选择不到任何元素，p:nth-child(2)选择器要满足的条件是：
  • 1、是一个段落p元素；
  • 2、是父元素的第二个子元素
  上述的HTML结构中，<div class="test">的第二个子元素是div元素，而不是p元素，所以不满足条件，这样就选择不到任何元素

转载于:https://www.cnblogs.com/tu-l/p/5171217.html