后代选择器（空格）匹配任意嵌套深度的后代元素，如.nav a；子选择器（>）仅匹配直接子元素，如.nav > a；选择取决于HTML结构稳定性与样式渗透需求。
后代选择器（空格）匹配所有嵌套层级
后代选择器用空格分隔，比如 .nav a，它会选中 .nav 内部任意深度的 a 元素——不管是子元素、孙子元素，还是嵌套在 5 层 div 里的 a。这种“穿透式”匹配很强大，但也容易误伤。
- 常见错误：给表单加
.form label，结果连内部弹窗、嵌套卡片里的label全被染红了 - 适用场景：文章正文排版（如
.article p、.article img），需要统一控制整块内容的视觉节奏 - 性能注意：浏览器需遍历整个 DOM 子树，深层嵌套时略慢于子选择器
子代选择器（>）只认“亲儿子”
子代选择器用 > 连接，例如 .nav > a，它只匹配直接子元素——也就是父元素的**第一层子节点**，跳过所有更深层级。
- 典型误用：写成
ul li却想只控制菜单一级项，结果二级下拉菜单也被样式污染 - 正确做法：改用
ul > li，这样ul > li > ul > li里的内层li就完全不受影响 - 兼容性无顾虑：IE7+ 全支持，现代项目可放心使用
怎么选？看结构是否可控
关键不是“哪个更高级”，而是你的 HTML 嵌套是否稳定、是否允许样式向下渗透。
- 结构扁平、组件边界清晰（如导航栏、表单字段组）→ 优先用
>，避免意外继承 - 结构动态、内容由 CMS 或用户生成（如富文本编辑器输出）→ 用空格更稳妥，确保样式兜底生效
- 调试技巧：在 DevTools 里右键元素 → “Break on attribute modifications”，再临时切换选择器，观察哪些元素突然变色/失样式，就能反推匹配范围
别忽略组合带来的歧义
同一个写法，前后顺序一换，意思天差地别：div.class 是“带 class 的 div”，而 .class div 是“class 容器里的任意 div”——后者才是后代选择器。很多人卡在这一步，以为加了点就是类选择，其实空格位置决定了语义主谓关系。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的，是当父容器本身是动态插入（比如 JS 渲染的 modal）时，> 会完全失效——因为新节点不是原父元素的直接子节点，而是 fragment 插入后重建的 DOM 关系。这时候反而得退回到空格写法，或配合属性选择器（如 [data-modal] > .content）来加固定位。
