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

1.官方解释：

　　p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
　　p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

2.大白话

　　p:nth-child(2)　　选择p同级元素中的（从前到后的）第二个元素

　　p:nth-of-type(2) 　选择p同级元素中的第二个p元素

第一个是不管谁都得算上，第二个只管看p元素

简单的实例了解一下

p:nth-child(2):

<style>  p:nth-child(2) { background:hotpink; } /*选中的是p的父元素的第二个元素*/ </style>
<body>
　　<h1>这是标题</h1>
　　<p>第一个段落。</p>
　　<p>第二个段落。</p>
　　<p>第三个段落。</p>
　　<p>第四个段落。</p>
</body>

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

p:nth-of-type(2):

<style>  p:nth-of-type(2){background: hotpink;} /* 选中的是p的父元素的子元素中第二个p*/ </style>
<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
</body>

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