直接子元素是父元素的第一层后代，用CSS子选择器>连接，如.parent > p { color: blue; }，仅选中直接子级p，不包括深层嵌套元素。
要选中某个元素的直接子元素，可以使用CSS中的子选择器（Child Selector），也就是用大于号 > 连接两个选择器。
什么是直接子元素？
直接子元素指的是某个元素的第一层后代元素，不包括更深层嵌套的后代。例如：
我是直接子元素
我是孙子元素，不是直接子元素
在这个例子中， 是 .parent 的直接子元素，而 不是。
立即学习“前端免费学习笔记（深入）”；
使用子选择器语法
子选择器的写法是：父元素 后跟 >，再跟子元素选择器。
.parent > p {color: blue;
}
上面的规则只会选中 .parent 的直接子级 元素，不会影响更深层的 或其他后代。
常见使用场景
- 只给导航栏的第一层菜单项加样式：nav > ul > li
- 限制样式作用范围，避免影响嵌套结构：.card > img 只选封面图，不选内容里的图片
- 配合类选择器精确控制：.list > .item.active
基本上就这些。只要记住 > 表示“直接的孩子”，就能准确选中目标元素。不复杂但容易忽略层级关系。
