子代选择器用 > 而非空格，.parent > .child 仅匹配直接子元素，空格为后代选择器；> 前后可省略空格但建议统一加空格以防解析错误；失效常因HTML结构不符、CSS优先级或DOM动态插入导致。
子代选择器用 >，不是空格
很多人写 .parent .child 想选直接子元素，结果把所有嵌套层级的 .child 都选中了。真正只选“儿子”不选“孙子”，得用 >：写成 .parent > .child。
空格是后代选择器（descendant），> 才是子代选择器（child）。浏览器对这两个符号的解析逻辑完全不同，不是风格偏好，是语义差异。
-
.wrap div→ 匹配.wrap里任意深度的div（包括.wrap > section > div） -
.wrap > div→ 只匹配.wrap的**直接子元素**div，跳过中间任何层级 - 如果父元素是
<ul>，想只给第一层<li>加边框，必须写ul > li，写ul li会让嵌套菜单里的li也中招
> 前后必须有空格吗？
必须有。CSS 规范要求 > 是一个独立的组合符，两边都要有空白字符（空格、换行、制表符），否则无效。
- ✅ 正确：
.nav > a、.nav>a（注意：这个看似没空格，但其实是允许的——CSS 中>前后**可以省略空格**，只要它不粘连到标识符上） - ❌ 错误：
.nav>a如果写成.nav>a（无空格）在绝大多数浏览器里仍能工作，但一旦前面是字母或数字，比如div:last-child>a，就会被当成伪类的一部分而失效 - 稳妥写法：统一加空格，
.nav > a，避免解析歧义和编辑器高亮异常
为什么有时候 > 不生效？常见掉坑点
不是选择器写错了，而是 HTML 结构或 CSS 优先级在捣鬼。
立即学习“前端免费学习笔记（深入）”；
- 父元素实际没有你认为的“直接子元素”——比如模板里写了
<div class="parent"><p><span>text</span></p></div>，你以为.parent > span能命中，其实不能，因为span的父级是p，不是.parent - CSS 权重不够：另一个更具体的选择器（如
#header .item）覆盖了你的.parent > .item，用浏览器开发者工具看“Computed”里哪条样式被划掉了 - 动态插入内容没触发重绘：JS 插入新节点后，如果父容器没重排，新子元素可能不匹配已有
>规则——这不是选择器问题，是 DOM 更新时机问题
替代方案：什么时候不该硬用 >？
当结构不确定、或需要兼容老浏览器（IE6–8 不支持 >），就得换思路。
- 用属性选择器兜底：
[class~="child"]或更明确的[data-level="1"]，配合 JS 控制生成 - 加 class 区分层级：
<div class="list"><div class="list__item">…</div></div>，然后写.list__item，比依赖 DOM 层级更可控 - Flex/Grid 布局下，
>往往多余：容器设display: flex后，子项自动成为“弹性项目”，用>和不用几乎没区别，反而容易误判作用域
子代选择器看着简单，但真正在复杂组件或 SSR 渲染里，DOM 层级稍一变化就失效。比起死磕 >，更值得花时间确认：这个“直接子”的关系，是不是业务逻辑里真正稳定、不该被打破的约束。
