使用子选择器（>）可选中父元素的直接子元素，如.container > p {color: red;}仅使“第一层段落”变红，嵌套段落不受影响，适用于导航、表格等需精确控制层级的场景。
在CSS中，选择直接子元素使用子选择器（Child Selector），也就是用大于号 > 连接两个选择器。它只会选中指定父元素的直接子元素，不会影响更深层的后代元素。
语法格式
parent > child { 样式规则 }
其中：
- parent 是父元素
- child 是直接子元素（只限一级嵌套）
实际例子
假设HTML结构如下：
如果只想给 .container 的直接子 p 设置样式，可以这样写：
.container > p {color: red;
}
结果：只有“第一层段落”变成红色，“嵌套的段落”不受影响，因为它不是 .container 的直接子元素。
常见应用场景
子选择器特别适合用于精确控制层级，避免样式污染。比如：
- 导航菜单中只对一级菜单项设置样式：
nav > ul > li - 表格中只针对直接子行设置背景：
table > tbody > tr - 组件封装时防止内部嵌套元素误匹配
