Question

为什么最后p没有突出显示？

w3schools说：

指定p元素的背景颜色，该元素是其父元素的最后一个子元素

那么应该突出显示最后一个p吗？

<style> 
div p:last-child {
    background: #ff0000;
}
</style>

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

对你说，用这个 - 这不是我的问题：

div p:last-of-type {...}

Answer 1

Last-child 未选择您期望选择的内容（您需要 last-of-type ）。 last-child属性仅适用于作为其父容器的最后一个子元素的元素。在您的情况下，span是last-child：

<div>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <span>The first span.</span> <!-- this <span> is the "last-child" -->
<div>

因此，CSS选择器p:last-child {}无法选择任何内容，因为它正在寻找容器的最后一个子项 {{1 } 元素。这是一个更具体的，现实世界的类比：

你有三个孩子：

杰克，17岁
苏珊，14岁
Alex，10岁

在标记中，这看起来像：

<p>

空白<mother> <jack>17</jack> <susan>14</susan> <alex>10</alex> </mother>选择器会选择Alex，因为他是您拥有的最后一个孩子。但是，您尝试选择某个类型的最后一个孩子，在这种情况下，我们会说他们的:last-child {}是类型。 name，然后，不会工作，因为即使Susan是你孩子的最后一个被命名为Susan （例如，有＆＃34的类型Susan:last-child ;苏珊＆＃34;），她不是你最后一个孩子。

如果您改为使用name，则会有效，因为第四个last-of-type是p last-of-type。

Answer 2

值得一提的是，W3Schools是一种外部资源。它不是官方的CSS文档。 :last-child伪类在此处的CSS选择器规范中定义：http://www.w3.org/TR/css3-selectors/#last-child-pseudo。该规范声明：

:last-child伪类表示一个元素，它是某个其他元素的最后一个子元素。

:last-child专门选择最后一个孩子。如果p:last-child是最后一个孩子，则p会将样式应用于span元素。在您的情况下，p是最后一个孩子，而不是<div> <p>Foo.</p> <span>Bar.</span> <div>，因此您的选择器无法选择。

示例1

span

此处p是最后一个孩子，而不是p:last-child。 <div> <p>Foo.</p> <span>Bar.</span> <p>Baz.</p> <div>不会选择任何内容。

示例2

此处p:last-child 是最后一个孩子，因此p会选择最后一个:last-of-type元素（此处的文字为＆＃34; Baz。＆＃ 34。

此行为正是:first-child选择器存在的原因。 :last-child和{{1}}始终只会选择第一个或最后一个孩子。

最后一个孩子的行为

2 个答案:

示例1

示例2