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 树的下一层。
性能上，> 通常比空格略快（尤其在深层嵌套结构中），但差异微小；真正影响体验的是可维护性——用错会导致样式意外泄露到深层节点。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误用了空格：打开 DevTools，看样式面板里被高亮的元素是不是比预期多
- 当父容器有动态插入内容（如 JS 插入
section再插li），ul > li就不会命中那些新li，而ul li会 -
>对伪类有效，例如nav > a:hover合法且常用
实际场景：菜单列表只作用于一级项
做导航菜单时，常需要给一级菜单项加边框或背景，但不想影响下拉子菜单里的链接。这时必须用 >：
nav > ul > li {
display: inline-block;
border-right: 1px solid #ccc;
}
nav > ul > li > ul {
display: none;
}
如果写成 nav ul li，所有嵌套的 li 都会被加边框，子菜单展开后样式就乱了。
- 注意层级深度要和 HTML 结构完全对应，
nav > ul > li要求nav下必须是ul，不能是div包着ul - 用 CSS 自定义属性配合
>更安全，比如[data-level="1"] > [data-item]，避免过度依赖标签名 - 某些 UI 库（如 Bootstrap）内部大量使用
>控制组件嵌套行为，改它们样式时务必先确认选择器层级
兼容性与边界情况
> 在所有现代浏览器和 IE7+ 都支持，不存在兼容问题。但要注意几个容易忽略的边界：
- 文本节点、注释节点不是元素，不会被
>匹配到，所以div > *不会选中div中的纯文本 -
:scope > .target在局部作用域（如Element.querySelector()）中可用，但支持度略低（Chrome 54+，Firefox 55+） - Flex 或 Grid 容器中，
>仍按 DOM 层级判断，不按视觉渲染顺序；即使子元素被order移动，选择器匹配也不受影响
>，而是写对之后去验证——DOM 结构稍一变化，> 就会完全失效。所以每次调整 HTML 嵌套时，都要顺手检查带 > 的样式是否还生效。 
