css 选择第一层子元素

在CSS中，选择第一层子元素是很常见的一种需求。我们通常会在某个元素下面只改变它的直接子元素，而不改变子元素的子元素以及更深的后代元素。这时候，选择第一层子元素就派上用场。

.parent > .child {
  /* 这里是 CSS 样式 */
}

上面这段代码中，我们使用了 > 选择器来选择第一层子元素。具体来说，.parent > .child 选择器会选择父元素为 .parent 的元素下面的所有子元素，而且这些子元素必须是直接的子元素，并且它们的类名为 .child。

下面是一个实际的例子，我们来制作一个导航条的样式。在导航条中，我们只想改变直接子元素 <a> 元素的颜色，而不改变它们下面的 <span> 元素：

.nav > a {
  color: blue;
}

上面这段 CSS 样式中，我们使用了 .nav > a 选择器来选取导航条 <div> 下的所有直接子元素 <a>，并将它们的颜色设置成蓝色。这样，我们就成功地选择到了第一层子元素并达到了预期的效果。