CSS中子代选择符“>”严格匹配直接子元素，空格为后代选择符会匹配任意层级；如ul>li只选一级子li，而ul li会选嵌套多层的li。
css中用 > 符号选直接子元素
要只匹配某元素的**直接子元素**（不包括孙子、曾孙等深层后代），必须用子代选择符 >，而不是空格。空格是后代选择符，会匹配任意层级的后代；> 才严格限定为父-子这一层关系。
常见错误是写成 ul li，以为只选 ul 下的 li —— 实际上它会选到嵌套三层的 li；而 ul > li 才真正只选 ul 的一级子 li。
-
div > p：只选div的直接子p，不选div > section > p -
.container > *:first-child：只选.container的第一个直接子元素，不管类型 - 不能连写多个
>，如div > > p是无效语法 -
伪元素不能作为
>的右侧目标，div > ::before不合法
为什么空格和 > 容易混淆
因为视觉上都像“分隔符”，但语义完全不同： （空格）代表“后代”，> 代表“直接子”。浏览器解析时，空格会递归遍历整个子树，> 则只查 DOM 树的下一层。
性能上，> 通常比空格略快（尤其在深层嵌套结构中），但差异微小；真正影响体验的是可维护性——用错会导致样式意外泄露到深层节点。
立即学习“前端免费学习笔记（深入）”；
