Question

我很想知道nth-child css选择器是如何工作的。我期待以下代码更改第3个

元素的背景颜色，即＆＃34;第三段＆＃34;。但是，当我运行此代码时，第二个

元素被选中并且＆＃34;第二个段落＆＃34;背景颜色有变化。

<html>
<head>
<style> 
p:nth-child(3) {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

Answer 1

由于<p>不是任何祖先的孩子而且真诚地计算<h1>，因此您需要使用:nth-of-type来定位第三段

p:nth-of-type(3) {
    background: #ff0000;
}

Fiddle

Answer 2

nth-child不关心其他元素的类型，因此它也会计算h1元素。

您可以使用p:nth-of-type(3)

归档所需内容

编辑：澄清

Answer 3

在这种情况下，您指定的段落是其父级的nth-child。由于父级为body，并且您要求n为3，因此它将是您标记中的第二个p。

css中的nth-child选择器

3 个答案:

Fiddle