后代选择器（空格）匹配所有嵌套层级的后代元素，不关心中间隔几层；子选择器（>）仅匹配直接子元素，要求目标为父元素的第一层子节点。
后代选择器（空格）匹配所有嵌套层级的后代元素
它不关心中间隔了几层，只要目标元素在祖先元素的 DOM 树中处于其下方，就会被选中。比如 article p 会命中 <article><p>...</p></article>，也会命中 <article><section><div><p>...</p></div></section></article>。
- 适用场景：批量统一区块内样式，如重设文章区域所有
p、a、ul的行高和颜色 - 注意空格不可省略：
articlep是一个叫articlep的标签名，完全无效；必须写成article p - 容易引发样式泄漏：组件封装时，若父组件用
.card p，子组件里某个深层p也会被意外覆盖
子选择器（>）只匹配直接子元素
> 是硬性层级断点，要求目标元素必须是父选择器的「第一层子节点」。比如 .nav > a 只会选中 <nav class="nav"><a>首页</a><a>关于</a></nav> 中的链接，但不会选中 <nav class="nav"><div><a>子菜单</a></div></nav> 里的那个 a。
- 适用场景：精准控制组件外壳结构，比如导航主项加粗，但子菜单保持默认字体
- 性能略优：浏览器无需遍历整棵子树，只需检查父元素的 immediate children
- 常见误写：
.menu>a（无空格）在部分老版本 Safari 中可能解析异常，建议统一写成.menu > a
混用时最麻烦的不是语法，而是语义共识
一个团队里有人习惯用 .modal .btn，有人坚持 .modal > .btn，表面看只是多一个 >，但实际影响的是组件可维护性——某天按钮被包进 <footer></footer> 或 <form></form>，前者仍生效，后者直接失效。
- 推荐规则：对外暴露的公共样式类（如
.card-title）优先用后代选择器；对内部结构强约束的（如.tabs > .tab-item）必须用子选择器 - 审查技巧：用浏览器 DevTools 的「Computed」面板看某条样式是否来自
div p还是div > p，能快速定位穿透过度问题 - CSS-in-JS 或 Shadow DOM 场景下，子选择器更安全，因为后代选择器可能跨出作用域边界
空格和 > 不是“可选修饰”，而是 DOM 关系的声明
它们不是为了“让选择器看起来更长”，而是在明确告诉浏览器：“我要找的是家族树里哪一辈的人”。写错一个符号，就等于把曾孙当成儿子来发红包——对象错了，后续所有样式逻辑都可能偏移。
真正难的不是记住语法，而是在写 .sidebar a 前，停下来问一句：这个 a 是我真想全局控制的链接，还是仅指侧边栏一级菜单？答案不同，选择器就该不同。
