直接子元素选择器（>）仅选中父元素的直接子元素，如.nav > li只作用于第一层li；后代选择器（空格）则选中所有层级的后代元素，如.parent .child会匹配任意深度的.child。
子元素选择器和直接子元素选择器在CSS中用于选取不同层级的子元素，它们的关键区别在于匹配的范围不同。
直接子元素选择器（>）
使用 > 符号，只选择父元素的直接子元素，也就是嵌套层级为一级的子元素。
例如：.parent > .child { color: red; }
这条规则只会选中 直接位于 .parent 内部的 .child 元素，如果 .child 嵌套在 .parent 的某个中间元素里，就不会被选中。
立即学习“前端免费学习笔记（深入）”；
HTML结构示例：
会被选中
不会被选中
后代子元素选择器（空格）
使用空格分隔，选择符会匹配父元素内部所有层级的对应子元素，不管嵌套多深。
例如：.parent .child { color: blue; }
这条规则会选中 .parent 内部任何层级的 .child 元素，包括孙子、曾孙等。
同样的HTML结构：
会被选中
也会被选中
实际应用场景
当你只想给第一层子元素设置样式时，用 > 更精确，避免影响深层嵌套元素。
当你希望统一设置某类元素在特定容器内的所有实例时，用更方便。
比如导航菜单通常只给直接子项设置横向排列：
.nav > li { display: inline-block; }
这样不会影响下拉子菜单的布局。
基本上就这些。关键记住：> 是“亲儿子”，空格是“所有后代”。
