子选择器（>）仅匹配父元素的直接子元素，不匹配嵌套更深的后代元素。例如 ul > li 不选中 ul 内 div 包裹的 li，因 li 非 ul 的第一层子节点；它只作用于元素节点，对伪元素、文本节点无效；复合使用时需确保每级均为直接父子关系且无多余空格。
子选择器（>）只匹配直接子元素，不穿透嵌套层级
HTML 中的 > 是 CSS 子选择器，它严格限定「父元素 > 子元素」关系：目标元素必须是父元素的**第一层子节点**，不能是孙子、曾孙等更深层级。很多人误以为它类似后代选择器（空格），结果样式没生效，其实是结构没对上。
常见错误现象：ul > li 选不到 <ul><div><li>...</li></div></ul> 里的 <li>——因为 <li> 不是 <ul> 的直接子元素，中间隔了 <div>。
- 使用场景：需要精确控制菜单项、表单直系控件、卡片内顶层容器等，避免意外影响深层嵌套内容
- 注意 HTML 结构是否“干净”：比如某些框架（如 React）可能自动插入包裹
<div>，导致>失效 - 性能上几乎无差异，但可读性更强——看到
>就知道开发者有意限制作用域
子选择器和后代选择器（空格）的区别必须看 DOM 树深度
这是最常混淆的点。nav a（后代）会匹配 <nav><a></a><div><a></a></div></nav> 中全部两个 <a>；而 nav > a 只匹配第一个（直接子），第二个被跳过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，右键检查元素 → 看 Elements 面板中的缩进层级，确认目标元素是否真的在父元素下一级
- 用
document.querySelector('parent > child')在控制台测试，返回null就说明不是直接子元素 - 如果需要“第一层及以内所有某类元素”，别硬凑
>，改用:scope > *或 JavaScript 遍历parent.children
子选择器不能用于伪元素或文本节点
> 只作用于元素节点（Element），对文本节点、注释、<script> 内容、伪元素（如 ::before）完全无效。例如 p > ::first-line 是非法语法，浏览器直接忽略整条规则。
容易踩的坑：
-
ul > li::marker看似合理，但::marker不是<li>的子元素，而是其伪元素，这里>没意义，应写成li::marker -
div > text这种写法不存在——CSS 没有text选择器，也不能用>选中纯文本 - 服务端渲染或模板引擎（如 Vue/JSX）生成的空白文本节点（换行缩进）会让
parent.children和parent.childNodes数量不一致，但 CSS 子选择器不受文本节点干扰，这点反而比 JS 更“干净”
复合子选择器要小心空格位置和连写逻辑
article > header > h1 是合法的，表示「article 的直接子 header，再找它的直接子 h1」；但 article > header h1 就变成「article 的直接子 header 下的所有后代 h1」，语义已变。
关键判断方式：每一对 > 前后都必须是有效选择器，且中间**不能有空格**（除非空格是后代选择符）。
- 错误写法：
nav > .menu-item > a:hover—— 如果<a>不是.menu-item的直接子（比如中间有<span>），就失效 - 安全写法：
nav > .menu-item > * > a:hover（加一层通配）或拆成两步：先设.menu-item样式，再单独写a:hover继承 - 注意 CSS 优先级：
nav > ul > li > a比nav a优先级高，但过度嵌套会降低可维护性，4 层以上建议用 class 控制
子选择器看着简单，真正卡住人的往往不是语法，而是对 HTML 实际渲染结构的误判——DOM 树里多一个 wrapper、少一个 <div>，> 就立刻失效。动手前先看 Elements 面板，比查文档更快。
