1 
<!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？

4

4 回答 4

2

p:last-child将选择一个p元素，如果它是 a last-child，如果你有任何其他元素，last-child它将失败

演示

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

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

演示 2

以上将选择p最后一个元素，无论其他任何元素都可以是last-child父元素。

来到这个选择器，:last-child, 根本不是特定的，你还没有指定last-child什么？所以它将选择任何父元素last-child

所以

:last-child {
    background:#ff0000;
}

将选择i和body元素但不是p因为它不是last-childof body，如果你使用:last-of-type它会选择同样的方式

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

演示

您可以使用它firebug来检查每个元素并查看元素如何获取这些属性。

于 2013-09-07T05:56:29.687 回答
1

由于:last-child选择器选择了所有元素，它们是其父元素的最后一个子元素。

于 2013-09-07T05:50:24.317 回答
0

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

于 2013-09-07T05:51:11.727 回答
0

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

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

于 2013-09-07T05:51:52.570 回答