子选择器“>”专用于匹配直接子元素，不可用空格替代；其失效主因是html结构不匹配、css权重被覆盖或动态内容未重绘，连续使用需警惕结构刚性依赖。
想只给某一层级的元素加样式，又怕误伤嵌套更深的同名元素？用 > 就对了——它不是“可选语法糖”，而是唯一能精准卡死在“亲儿子”这一层的选择器。
为什么 > 不能用空格代替
空格是后代选择器，> 是子选择器，浏览器解析逻辑完全不同。写 .nav li，哪怕 li 躲在 .nav > ul > li 里也会中招；而 .nav > li 只认紧贴着 .nav 开头的那一批 li。
-
.list > li：只命中<ul class="list"><li>…</li></ul>中的li，跳过<ul class="list"><li><ul><li>…</li></ul></li></ul>里的内层li -
.list li：上面两种li全部匹配，毫无区分度 - 常见误写：
.container>p（无空格）在div:last-child>p这类场景下会被当成伪类解析失败，稳妥起见统一写成.container > p
> 失效的三个高频原因
写了却没生效，大概率不是语法错，而是结构或时机问题。
- HTML 结构不匹配：比如你以为
.wrap > span能命中，实际 DOM 是<div class="wrap"><p><span>…</span></p></div>，span的父级是p，不是.wrap - CSS 权重被覆盖：另一个更具体的选择器（如
#header .item）把你的.wrap > .item压住了，用开发者工具看“Computed”面板里哪条被划掉 - 动态插入内容未重绘：JS 新增节点后，若父容器没触发 layout，新节点可能不触发
>匹配——这不是选择器失效，是 DOM 更新时机问题，可手动触发getComputedStyle或加个force reflow
连续使用 > 定位深层固定路径
当结构稳定、且你明确知道层级路径时，连写多个 > 比用类名更轻量，也避免污染 HTML。
-
article > header > h1：只选 article 下第一层 header 里的第一层 h1，跳过<article><section><header><h1>…</h1></header></section></article> -
table > tbody > tr > td：比table td更安全，排除了thead/tfoot或嵌套表格干扰 - 注意：每多一层
>，对 HTML 结构的刚性依赖就强一分。一旦某层被 JS 动态替换或移除（比如删掉tbody），整条规则直接失效
真正难的不是写出 >，而是判断该不该用它——结构不确定、要兼容 IE8 以下、或者团队协作中 HTML 易变，这时候硬靠 > 反而增加维护成本。不如加个 data-level="1" 或用 BEM 类名收口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
