用于选择元素的第一个直接子元素的CSS选择器是什么？

Question

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

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

p > div

CSS中的

。

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

Answer 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;
}

修改：重要提示：您绝不应在div内使用p。我编写了这段代码，向您展示如何在您的案例中选择第一个孩子，但在div内使用p真是太糟糕了。每当您在<div>和<p>之间使用</p>时（例如）：

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

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

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

祝你好运！

Answer 2

如果您使用p > div作为代码，则选择器将为p > div:first-child

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