0

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

例子：

：第一个孩子

<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>

谢谢！

4

2 回答 2

4

当我使用:last-child选择器时，它只选择文档的最后一个孩子，而:first-child选择器选择文档的所有第一个孩子。

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

p:first-child这里匹配两个元素，因为第一个子元素div 和第一个子元素body都是p元素。

p:last-child只匹配一个元素，因为你的最后一个孩子div是 a p，但最后一个孩子body是那个div，而不是 a 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-typeandp:last-of-type代替。

于 2012-11-17T08:47:03.687 回答
2

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

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

于 2012-11-17T08:26:27.707 回答