后代选择器匹配任意深度的嵌套元素，只要目标是祖先的后代；子选择器仅匹配直接子元素。判断依据是HTML中目标节点是否直接挂载于父节点下：是则用>，否则用空格。
后代选择器（空格）到底匹配多深？
它不挑层级，只要目标元素在祖先元素的 dom 树内部，哪怕中间套了 section > article > div > span 五层，.card p 依然能命中——因为 p 是 .card 的“后代”。
- 常见错误：用
.form-group p给表单段落设字体，结果连内部.help-text里的p也被改了 - 适用场景：批量重置某区块内所有同类元素样式，比如统一
.article下所有a、ul、blockquote的基础间距 - 性能影响：浏览器需向上遍历祖先链确认关系，深层嵌套多时略慢（但日常几乎感知不到）
子选择器（>）为什么只认“亲生儿子”？
.nav > a 这种写法极其严格：它只匹配 .nav 的**直接子元素** a，如果 a 被包在 li 或 div 里，哪怕只多一层，就彻底失效。
- 常见错误：写成
.menu > li却发现下拉菜单项没生效——因为二级li实际是嵌套在另一个ul里，已不是.menu的直接子元素 - 适用场景：组件封装时防止样式穿透，比如只想重置导航栏一级菜单项，完全不管子菜单结构
- 性能略优：跳过深层遍历，匹配更快，尤其在长列表或动态渲染场景下更可控
怎么一眼判断该用空格还是 >？
关键看 HTML 结构里“中间能不能插层”：要宽松匹配所有嵌套内容，用空格；要精准控制第一层结构，用 >。
- 想改卡片正文的
p，但不想动标题、按钮文字、页脚里的p→ 用.card > p - 想统一文章区域所有段落行高，不管它在
blockquote还是figure里 → 用.post p - 检查 DOM：右键「审查元素」，看目标节点是否直接挂在父节点下——是，
>可用；否，空格更稳妥
混用和嵌套时最容易翻车的点
像 .container > section p 这种写法，其实等价于 (.container > section) p：先找 .container 的直接子 section，再找这个 section 里所有后代 p（不限层级）。很多人误以为它只选“section 的直接子 p”，其实不是。
立即学习“前端免费学习笔记（深入）”；
-
.a > .b .c和.a .b > .c完全不同：前者要求.b是.a的子，.c是.b的任意后代；后者要求.b是.a的任意后代，.c是.b的直接子 - 过度嵌套如
.a .b .c .d会降低性能，也增加维护难度，尽量用语义化类名替代深度路径 - 组件化开发中，
>是防样式泄漏的第一道防线，但别滥用——比如button > span可能漏掉没有span包裹的文字
实际写的时候，别光看“想选什么”，先看“HTML 里它到底挂在哪一层”。层级错一点，样式就飞了。