CSS 选择第一个直接子级

在 CSS 中，我们可以使用选择器来选择指定元素，而选择第一个直接子级则需要使用特定的选择符。

什么是第一个直接子级？

一个元素的第一个直接子级是指它的第一层子元素。例如，在以下 HTML 中，<div> 元素的第一个直接子级为 <p> 元素：

<div>
  <p>第一个直接子级</p>
  <ul>
    <li>非直接子级</li>
  </ul>
</div>

如何选择第一个直接子级？

要选择一个元素的第一个直接子级，我们需要使用 CSS 中的 > 选择符。例如，在以下 CSS 中，我们使用了 > 选择符来选择所有 <div> 元素的第一个直接子级 <p> 元素：

div > p {
  /* CSS 样式 */
}

此选择器将只选择 <div> 元素中的第一个直接子级 <p> 元素，而不会选择任何其他元素。

示例

以下是一个示例，演示如何使用 > 选择符选择第一个直接子级。我们有一个 HTML 文件，其中包含两个 <div> 元素，每个 <div> 元素中都有一个 <p> 元素和两个 <ul> 元素。在 CSS 中，我们将选择所有 <div> 元素的第一个直接子级 <p> 元素，并将其设置为蓝色。

<div>
  <p>第一个直接子级</p>
  <ul>
    <li>非直接子级</li>
    <li>非直接子级</li>
  </ul>
</div>

<div>
  <p>第一个直接子级</p>
  <ul>
    <li>非直接子级</li>
    <li>非直接子级</li>
  </ul>
</div>

div > p {
  color: blue;
}

这将选择两个 <div> 元素中的第一个直接子级 <p> 元素，并将它们的颜色设置为蓝色。

总结

选中一个元素的第一个直接子级是一个常见的需求。在 CSS 中，我们可以使用 > 选择符来实现这个目标。无论是在开发响应式网页还是简单地样式化 HTML 元素，此选择符都是非常有用的。