：h1和p的n-child奇怪行为

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()时，它会充当另一个选择器。它从字面上说，＆＃34;给我所有的p元素，这是他们所有兄弟姐妹中的第一个孩子。＆＃34;你没有这样的p标签。您的第一个p标记是第二个孩子。