html - CSS正文：第一个孩子

Question

有人可以向我解释为什么这不起作用吗？

<html>
 <head>
  <style>
   body:first-child
   {
      color:#f00;
   }
  </style>
 </head>
 <body>
  <div>I should be red.</div>
  <div>This is not red.</div>
 </body>
</html>

根据我的阅读，第一个子选择器应该从 body 标记中选择第一个 div 对象。如果它没有选择 div 元素，它在选择什么？

score 17 · Accepted Answer

:first-child伪类在bodybody:first-child标签上操作，所以它的 body 标签是它的父母的第一个孩子，如果你想要body第一个孩子使用孩子选择器

body > :first-child{
    color:#f00;
}

这会给你身体的第一个孩子。

score 8 · Accepted Answer

要定位第一个 div，您需要执行body div:first-child. 现在（我假设）你只是在选择第一个孩子的身体。（其实我不完全确定你现在选择的是什么，想想看。我不认为first-child选择器直接挂在body标签上是有效的。）

body div:first-child {
    color:#f00;
}

这个 CSS 会按照你的预期为它着色。将其读作“body 的第一个孩子的 div”。

score 1 · Accepted Answer

您的 CSS 说选择任何 BODY 元素，它是其父元素的第一个子元素，该子元素将是 HTML 元素。BUt HEAD 是第一个孩子，而不是 BODY。

至少我认为这是正确的:-)

score 0 · Accepted Answer

要针对你们中的第一个div可以body使用这个，

body div:first-of-type {
   /* style */
}

html - CSS正文：第一个孩子

4 回答 4

Related

Reference