如何正确使用nth-child？

Question

我正在尝试在 Codecademy 上学习如何正确使用 nth-childs 。它说

p:nth-child(2) {
    color: red;
}

会将其父元素的第二个子元素的每个段落变成红色。

所以我认为这意味着

body:nth-child(2) {
    color: red;
}

<body> 
<p> some text </p> 
<p> some text </p>
</body>

意味着第二段会变成红色。但这不起作用...我做错了什么？

Answer 1

:nth-child应用于元素，而不是元素的子元素。 body:nth-child(2)应理解为“body作为其父元素的第二个子元素的每个元素”，而不是“*作为该元素的第二个子元素的每个元素 ( ) body”。

body > p:nth-child(2)如果您想要p为该元素的直接后代的第二个标签设置样式，请使用body。