Question

所以我想使用第n个子选择器将第一段变为红色。这是我的代码：

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

<h1>This is a heading</h1>
<p>I want this paragraph to be red.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>

但结果是红色的0段......我不明白我做错了什么。

Answer 1

你可以使用这样的伪元素：

   p:first-child {
    background-color: red;
}

但是如果你要有更多的段落，你应该把它放在一个div中并制作它：

<div class="paragraphs">
<p>paragraph1</p>
<p>paragraph2</p>
<p>paragraph3</p>
<p>paragraph4</p>
</div>

并使用此：

.paragraphs p:first-child {
        background-color: red;
    }

nth-child选择器在css中不工作（？）

1 个答案: