:nth-child 与 h1 和 p 的奇怪行为

Question

在以下代码中使用p:nth-child(1) 时，第一段不会被选中：

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

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

查看jsBin

但是当删除 h1 时它可以工作，请参阅此 jsBin

知道为什么吗？

Answer 1

p:nth-child(1) 正在选择p 元素，该元素也是父元素的第一个子元素（在本例中为body）。在这种情况下，没有p 元素也是父元素的第一个子元素；这里父元素的第一个子元素是h1。你想要的是p:nth-of-type(1)，或者更直接的是p:first-of-type。

Answer 2

那是因为h1 是正文中的第一个孩子。

改用nth-of-type(1)，它会起作用。

Answer 3

当您使用:nth-child() 时，它充当另一个选择器。它的字面意思是，“给我所有的 p 元素，它们是所有兄弟姐妹中的第一个孩子。”而且你没有任何p 这样的标签。您的第一个 p 标签是第二个孩子。