css - p :nth-child(2) and p:nth-of-type(2)?有什么区别

Question

p:nth-child(2) 之间有什么区别？和 p:nth-of-type(2) ？

根据 W3Schools CSS Selector Reference :

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

区别似乎是它的 parent 的 child 和<p> 其父元素。

如果我们已经提到元素类型为 <p>在这两种情况下，关键字 parent 都建立了parent-child 关系，那么有什么区别呢？

Answer 1

对于 p:nth-child(2)如果是段落，它会选择其父元素的第二个元素，而 p:nth-of-type(2)将选择其父元素的第二段。如果您仍然感到困惑，让我为您澄清一下。考虑下面的代码片段:

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

在这里，p:nth-child(2)将选择 <p>Little</p>因为它是其父元素的第二个子元素并且是段落元素。

但是，在这里，p:nth-of-type(2)将选择 <p>Piggy</p>因为它将在其父级的所有段落中选择第二段。

帮助来自: https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/