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>
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>