如何通过css选择器选中直接子元素

直接子元素是父元素的第一层后代，用CSS子选择器>连接，如.parent > p { color: blue; }，仅选中直接子级p，不包括深层嵌套元素。

要选中某个元素的直接子元素，可以使用CSS中的子选择器（Child Selector），也就是用大于号 > 连接两个选择器。

什么是直接子元素？

直接子元素指的是某个元素的第一层后代元素，不包括更深层嵌套的后代。例如：

  

我是直接子元素

  
    我是孙子元素，不是直接子元素
  

在这个例子中，

是 .parent 的直接子元素，而 不是。

使用子选择器语法

子选择器的写法是：父元素 后跟 >，再跟子元素选择器。

.parent > p {
  color: blue;
}

上面的规则只会选中 .parent 的直接子级

元素，不会影响更深层的

或其他后代。

常见使用场景

• 只给导航栏的第一层菜单项加样式：nav > ul > li
• 限制样式作用范围，避免影响嵌套结构：.card > img 只选封面图，不选内容里的图片
• 配合类选择器精确控制：.list > .item.active

基本上就这些。只要记住 > 表示“直接的孩子”，就能准确选中目标元素。不复杂但容易忽略层级关系。