Question

我已经尝试了几次，每次下一件事情发生时：当我使用:last-child选择器时，它只会选择文档的最后一个子项，而:first-child选择器会选择 all 文档的第一个子项。有人能解释一下为什么吗？

示例：

：第一子

<style>
p:first-child {background: pink;}
</style>
<body>
<p> This is the first child of the body so the background color is pink </p>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
<div>
<p> This is the first child of the div so the background color is also pink </p>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
</div> 
</body>

：最后子

<style>
p:last-child {background: pink;}
</style>
<body>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
<p> I expect that this will have a pink background but it won't :( Why? </p>

<div>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
<p> This is the last child of div and only this paragraph has a pink background </p>
</div> 
</body>

谢谢！

Answer 1

当我使用:last-child选择器时，它只会选择文档的最后一个子项，而:first-child选择器会选择 all 文档的第一个子项。< / p>

那不是真的。他们分别在文档中选择 all 父母的最后一个和第一个孩子。你要么误解了“最后一个孩子”和“第一个孩子”的含义，要么误解了你的页面结构。

p:first-child匹配此处的两个元素，因为div 的第一个孩子和 body的第一个孩子都是p元素。

p:last-child只匹配一个元素，因为div的最后一个孩子是p，但body的最后一个孩子 div } ，而不是p。

稍微缩进HTML会更清楚：

<body>
  <p></p>   <!-- First child of body is p -->
  <p></p>
  <p></p>
  <div>     <!-- Last child of body is div -->
    <p></p> <!-- First child of div is p -->
    <p></p>
    <p></p> <!-- Last child of div is p -->
  </div> 
</body>

如上所述，您可能希望选择第一个和最后一个p元素，在这种情况下，您应该使用p:first-of-type和p:last-of-type代替。

Answer 2

p:last-child选择p元素作为其父级的最后一个子元素，因此不会跟随任何兄弟元素。 <p> I expect that this will have a pink background but it won't :( Why? </p>之后是div，这是p以前的最后一个孩子。

我认为你想要的是:last-of-type伪类。 p:last-of-type {background: pink;}将选择您想要的元素。

为什么：last-child选择器只选择“最新的孩子”？

2 个答案: