子选择器>只匹配直接子元素，不匹配后代元素；.parent>.child仅作用于.parent的直接子元素中带.child类的元素，而.parent .child匹配任意深度的后代元素。
子选择器 > 只认“亲生儿子”，不认“孙子”
它强制要求目标元素必须是前一个选择器匹配结果的**直接子节点**，中间不能隔任何其他元素。比如 ul > li 会匹配 <ul><li>✓</li></ul>，但不会匹配 <ul><div><li>✗</li></div></ul>——哪怕那个 li 有 class、id 或其他样式，只要不是 ul 的直接子，就完全无视。
.parent > .child 和 .parent .child 差别极大
这是最容易混淆也最常出错的地方：
-
.parent > .child：只作用于.parent的**直接子元素中带.child类的那几个** -
.parent .child（空格）：匹配.parent内**任意深度嵌套的、带.child类的所有后代元素** - 前者特异性更高，浏览器渲染更快（不用遍历整棵 DOM 树）
- 后者容易造成样式污染，尤其在 CMS 或组件化结构中，
.child出现在嵌套section、article里时，样式会意外生效
多层 > 链式写法要严格对应 HTML 结构
像 .cms-page-view .column > div > h2 这种写法，每一级都必须真实存在且顺序不可跳：
-
.cms-page-view .column是后代关系，先定位到某个div class="column" -
> div要求这个.column元素下**紧挨着的子节点必须是div标签**（不能是section、article或文本节点） -
> h2再要求该div的子节点中**第一个层级就是h2**，中间不能插header、div等其他包裹 - 如果结构动态生成（如 React 渲染后插入
div包裹），这条规则就会失效——此时宁可加语义类名（如.section-title），也不要硬靠深层>
别用 > 替代语义类名，它只是兜底手段
直接子选择器本质是**结构依赖型工具**，一旦 HTML 层级微调（比如加个 div 包一层），样式立刻断裂：
立即学习“前端免费学习笔记（深入）”；
- 优先给关键元素加明确类名，例如把
<div><h2>标题</h2></div>改成<div class="page-header"><h2 class="page-title">标题</h2></div> -
>更适合临时修复、第三方组件覆盖、或结构绝对稳定的场景（如固定菜单nav > ul > li） - 超过三层链式（如
a > b > c > d）基本等于埋雷，后续维护成本远高于加一个类
真正难的不是写对 >，而是判断什么时候不该用它——结构越不确定，越要靠语义类名收口。
