用于选择元素的第一个直接子元素的 CSS 选择器是什么？ [复制]答案

【问题标题】：What is the CSS selector for selecting the first immediate child of an element? [duplicate]用于选择元素的第一个直接子元素的 CSS 选择器是什么？ [复制]
【发布时间】：2015-01-28 06:35:47
【问题描述】：

例如，如果我想在 <p> 元素中使用第一个 <div>，我会使用哪个选择器？

要在 <p> 元素中获取所有 <div>s，我会这样做：

p > div

在 CSS 中。

我怎么能做到这一点，只得到第一个<div>？

【问题讨论】：

好吧，你想要first-child，为什么不试试:first-child 伪元素呢？ developer.mozilla.org/en-US/docs/Web/CSS/:first-child
聪明！我会走那条路。 @克里斯蒂
仅供参考：p 不能包含 div，这将是无效的 HTML。
您希望选择器记录在您没有费心阅读的教程中。
我错过了，我不允许我犯错吗？ @torazaburo

标签： html css css-selectors

【解决方案1】：

:first-child 选择器允许您将第一个元素直接定位在另一个元素中。

<p>
  <div>First child...</div>
  <div>Second...</div>
  <div>Third...</div>
  <div>Fourth...</div>
</p>

在 CSS 中：

p > div:first-child {
  font-size: 1.5em;
}

编辑：重要的注意事项是你永远不应该在p 中使用div。我编写这段代码是为了向您展示如何在您的情况下选择第一个孩子，但是在p 中使用div 真的很糟糕。每当您在<p> 和</p> 之间使用<div> 时，就像（例如）这样：

<p> <div></div> </p>

浏览器将尝试将其更正（成为有效代码）：

<p></p> <div></div> <p></p>

祝你好运！

【讨论】：

好的，谢谢，我会选择那条路线的。
@user208829 如果有效，请接受答案。

【解决方案2】：

如果您使用p > div 作为标签，那么选择器将是p > div:first-child

它找到 p 标签然后是第一个 div。

【讨论】：

为什么会投反对票？答案是正确的。