后代选择器（空格）穿透任意嵌套层级匹配所有后代元素，子选择器（>）仅匹配直接子元素；前者易致样式泄漏与性能略降，后者结构敏感但封装性强，选型应基于语义意图与结构稳定性。
后代选择器（空格）会穿透任意嵌套层级
写成 .card p，浏览器会匹配 .card 内部所有 p 元素——哪怕中间隔着 section > article > div > p。这种“穿透性”很实用，但也容易误中：
- 富文本编辑器输出的 HTML 结构不可控，用
.article p能兜底生效 - 但若
.modal里嵌了另一个组件，它的p也会被染色，造成样式泄漏 - 性能上，DOM 深度大时，
.a .b需遍历整棵子树，比.a > .b略慢（日常几乎感知不到）
子选择器（>）只认“亲儿子”，不认孙子
.nav > a 只匹配 .nav 的**直接子 a**，中间不能插任何其他标签。常见翻车点：
- 写成
.menu > li，但二级菜单的li实际在.menu > ul > li里 → 完全不生效 - JS 动态插入的 modal，如果用
document.body.appendChild(modal)，新节点不是原父容器的直接子节点 →.modal > .content会失效 - 结构重构风险低：一旦 HTML 增加中间层（比如给
nav ul包一层div），nav > ul直接断掉，反而帮你暴露耦合问题
怎么选？看结构是否稳定、是否允许样式下渗
没有绝对优劣，关键在语义意图：
- 内容区排版（如文章正文、CMS 输出）→ 用空格，确保样式能落到所有合理后代上
- 组件封装（如
.button-group > .btn）→ 用>，防止子组件内同名元素被意外覆盖 - 混搭要谨慎：
.container > ul li a这种写法，>和空格共存，层级逻辑易误判，团队最好统一风格 - 更稳妥的替代：BEM 命名 + 明确作用域类，比如
.card__body p，既避免猜层级，又语义清晰
调试时别只靠眼睛看，要用 DevTools 验证
右键目标元素 → “Reveal in Elements panel”，顺着父链往上数，确认中间隔了几层；再临时加个 border: 2px solid red，看哪些元素真被命中。特别注意：
立即学习“前端免费学习笔记（深入）”；
-
:not()前的选择器决定了它的作用半径 ——.list > li:not(.disabled)是安全的，.list li:not(.disabled)可能误中嵌套列表里的li - 动态插入的 DOM 节点，其父子关系取决于插入方式，不是“看起来在某个容器里”就等于它是其直接子节点
> 的“直接子”判断完全依赖插入时刻的 DOM 关系，而不是视觉位置。 
