Question

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

问题：

如果我改变

p:last-child
    {
    background:#ff0000;
    }

到

:last-child
        {
        background:#ff0000;
        }

然后整个页面变红了。为什么？ p:last-child和:last-child之间有什么区别？

Answer 1

p:last-child会选择p元素（如果它是last-child），如果您有任何其他元素last-child则会失败

Demo

在这种情况下，您应该使用更严格的伪似

p:last-of-type {
   background:#ff0000;
}

Demo 2

上面将选择p元素，这是最后一个元素，不管父元素可以是last-child的任何其他元素。

来到此选择器:last-child，根本不具体，您还没有指定last-child什么？因此，它将选择任何父元素last-child

所以

:last-child {
    background:#ff0000;
}

将选择i和body元素，但不选择p，因为它不是last-child的{{1}}，如果您使用body，则相同它会选择

:last-of-type i以及body，因为现在我们正在使用p，因此它会选择每个不同元素的最后一个元素。

Demo

您可以使用last-of-type检查每个元素，并查看元素如何获取这些属性。

Answer 2

由于:last-child选择器选择了其父级的最后一个子元素。

Answer 3

默认情况下，所有元素都选中它，第一个是指定p元素。 [谷歌翻译]

Answer 4

p:last-child通过将CSS属性仅应用于段落元素的最后一个子项来工作。

:last-child通过将CSS属性应用于父元素的最后一个子元素来工作。在这种情况下，最后一个孩子总是body，因为我们总是有一个body，对吗？：）

css：问题：最后一个子选择器

4 个答案: