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。

Answer 2

用

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

你正在选择第二个不存在的body元素，如果你想得到你必须写的第二个p元素：

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

Here is a Fiddle

Answer 3

任何父母，身体，div或其他容器的第二个孩子。

示例：

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <style type='text/css'>
            div:nth-child(2) { background-color:red; }
        </style>
    </head>
    <body>
        <div> First child (normal)
            <div> first child of first child (normal)  </div>
            <div> Second child of first child (red) </div>
            <div> Third child of first child (normal) </div>
        </div>
        <div> 2 Second child (red) </div>
        <div> 3 Third child (normal) </div>
    </body>
</html>

Answer 4

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

在上面的代码中，您指向页面的第二个主体，这是不可能的。

如何正确使用nth-child？

4 个答案: