子选择器>必须用于精准控制层级深度，如导航菜单主项隔离、重置容器直接子元素margin、表单控件分组等场景；后代选择器（空格）适用于全局泛匹配，如文章段落统一设置、图标状态继承等。
没有“更好”，只有“更合适”——选 > 还是空格，取决于你是否需要控制层级深度。
什么时候必须用子选择器 >
当你只希望样式作用于某一层级、且不能穿透到嵌套更深的结构时，> 是唯一可靠手段。常见于组件化开发中对第一层结构的隔离。
- 导航菜单主项和下拉项混用
ul时：.nav > li只影响顶层菜单项，.nav li会误染二级li - 重置容器内直接子元素 margin，但不想影响孙子节点：
.card > * { margin: 0; }安全；.card *会把内部所有嵌套元素 margin 全清掉 - 表单控件分组：用
.form-group > input确保只选.form-group下第一层input，避免误匹配fieldset或div里的深层input
什么时候该用后代选择器（空格）
当你真正需要“不管嵌多深都生效”的泛匹配行为，比如全局文本样式、主题色继承、或通用工具类。
- 统一设置文章内容内所有段落字体：
article p比article > p更合理，因为p可能被section、blockquote等包裹 - 图标颜色跟随父容器状态：
.btn:hover svg需要匹配任意位置的svg，而非仅限直接子元素 - 第三方组件内部样式注入时，常依赖后代选择器穿透封装边界（如
.react-datepicker-wrapper .day）
> 和空格混用时容易踩的坑
组合越长，特异性越高，但也越脆弱——HTML 结构微调就可能失效。尤其注意空格不可省略、> 不可写成 >= 或 >>。
立即学习“前端免费学习笔记（深入）”；
-
.menu>li（无空格）无效：CSS 要求>前后必须有空格，正确写法是.menu > li -
div > p > span要求三层严格嵌套，中间插一个em就断链；而div p span仍能命中 - 性能差异在大型 DOM 中可见：
nav > ul > li > a比nav a匹配更快，但维护成本更高
最常被忽略的一点：子选择器不解决“语义断裂”，它只认结构。如果 HTML 里本该是直接子元素却因框架生成额外 wrapper（比如 React 的 Fragment 或 Vue 的 v-if 插入 div），> 就会失效——这时得靠 BEM 命名或 data 属性兜底，而不是硬改选择器。
