This question already has answers here:
nth-of-type vs nth-child
(7 个回答)
5年前关闭。
所以我想使用第 n 个子选择器将第一段变为红色。这是我的代码:
但结果是红色的 0 段......我不明白我做错了什么。
但是如果你打算有更多的段落，你应该把它放在一个 div 中并做到这一点:
并使用这个:
(7 个回答)
5年前关闭。
所以我想使用第 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 段......我不明白我做错了什么。
最佳答案
您可以使用这样的伪元素:
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;
}
关于html - 第 n 个子选择器在 css 中不起作用(？)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36568657/
10-13 02:52