后代选择器 .a .b 比子选择器 .a > .b 慢，因浏览器从右向左匹配：.a .b 需对所有.b向上遍历父链验证是否在.a内，而.a > .b仅检查直接父节点是否为.a，路径更短、无中间节点回溯。
后代选择器 .a .b 为什么比子选择器 .a > .b 慢
浏览器匹配 CSS 时永远从右往左，.a .b 的关键选择器是 .b：它先找出页面中所有带 .b 类的元素（可能成百上千），再对每个 .b 向上遍历父链，确认是否在某个 .a 内部。而 .a > .b 的关键选择器仍是 .b，但只需检查其**直接父节点**是否为 .a，跳过中间所有祖先节点验证。
常见错误现象：article p strong 在万字长文中会拖慢渲染——哪怕只有 1 个匹配项，也可能扫描全部 strong 标签并逐个回溯三层；换成 article > .content > p > strong 仍慢，因关键选择器还是 strong；真正快的是给目标加唯一类，比如 .text-emphasis。
- DOM 越深、同类元素越多，
.a .b的回溯开销越明显；实测在低端 Android 设备上，5 层后代选择器比单层子选择器慢 4 倍以上 - 子选择器
.a > .b的路径更短，浏览器无需“猜”中间隔了几层，匹配逻辑更确定 - 二者兼容性完全一致（IE7+ 支持），性能差异不是兼容性问题，而是匹配策略本质不同
.nav ul li a 和 .nav > ul > li > a 的实际开销差在哪
表面看只是空格和 > 的区别，但执行逻辑天差地别。.nav ul li a 会先抓全页所有 a，再逐个向上查：是不是 li 的后代？是不是在某个 ul 里？是不是被 .nav 包着？三层回溯叠加，任意一层不满足就丢弃——但丢弃前已做了大量无效计算。
.nav > ul > li > a 则严格限定层级：只找 a，只检查其父节点是否为 li，再查该 li 父节点是否为 ul，最后查该 ul 父节点是否为 .nav。没有“可能在孙子层”的模糊地带。
立即学习“前端免费学习笔记（深入）”；
- 当 HTML 结构动态变化（如插入
<details>或<div>包裹），.nav ul li a仍会命中非预期节点，导致样式错乱却难以定位 -
.nav > ul > li > a在结构变动后直接失效——这不是缺陷，而是帮你暴露契约断裂，避免后期调试雪球越滚越大 - DevTools 中用
document.querySelectorAll()测节点数：.nav ul li a返回 287 个，.nav > ul > li > a返回 6 个，前者就是潜在性能瓶颈信号
什么时候必须用后代选择器，又该怎么控制风险
后代选择器不是敌人，它是为内容区松散匹配设计的。比如 .article-body p、.modal img 这类场景，HTML 结构不可控（富文本编辑器、CMS 输出），你无法保证 p 一定在 .article-body 直接子层，此时用空格是合理妥协。
但必须设防：
- 关键选择器不能太泛：避免
.article-body div p，改用.article-body p或更具体的.article-body > .content p - 禁用通配组合：
.article-body *:not(.ignore)是性能黑洞，浏览器需对每个子节点执行:not()计算 - 长文滚动卡顿？打开 Chrome DevTools → Performance 面板 → 录制操作 → 筛选
Recalculate Style→ 点开事件看触发它的 CSS 规则行号，90% 的问题都出在最右边那个选择器太宽 - 框架中动态加 class（如 React 的
className={isActive ? "active" : ""}）若配合.list li a这类选择器，每次状态切换都会触发全量重匹配
子选择器 > 和 :not() 搭配时容易忽略的边界
.menu > li:not(.disabled) 安全，因为 :not() 的作用域被 > 锁死在“一级 li”上；而 .menu li:not(.disabled) 危险，它会把嵌套在 li 内部的子菜单 li 也纳入计算范围。
真实翻车案例：表格行 .table-row 内某列渲染了二级列表，也用了 li。若写 .table-row li:not(.hidden)，二级列表的 li 会被误判为主表行的一部分，干扰行高、溢出和点击热区。
-
:not()不改变选择器的作用半径，它前面那个选择器（如.menu > li）决定了它的“管辖范围” - 混用时优先收窄：想排除禁用项，先用
>锁定层级，再用:not()过滤，而不是反过来 - Chrome DevTools 中右键目标元素 → “Break on attribute modifications”，然后手动 toggle
.disabledclass，能直观看到哪些规则被真实触发
