html - html疑惑中的第n个 child

Question

我希望 p:nth-child(2) 突出显示 p 的第二项，即第二段，但为什么在这种情况下第一段是突出显示？我删除了 h1，p:nth-child(2) 突出显示了第 3 项，为什么？ h1 是否也考虑 p？

p:nth-child(2) {
    background: #ff0000;
}

<h1>test</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

Answer 1

p:nth-child(2) 表示如果 p 是集合中的第二个元素，那么它会被高亮显示。使用 p:nth-of-type(2) 准确突出显示 p 和 h1 组合集合中的第二个 p 元素。