子选择器用“>”连接父、子选择器，仅匹配直接子元素，不穿透后代；如ul > li只选ul的直属li，区别于空格的后代选择器。
用 > 符号，写成 父选择器 > 子选择器，就能只选中直接子元素，不穿透到更深层的后代。
子选择器的基本写法
子选择器用大于号 > 连接两个选择器，表示“紧挨着下一级”的关系。它不会匹配嵌套更深的元素。
-
ul > li：只选中<ul>的直接<li>，不选中<ul>里<ol>内的<li> -
.container > p：只选中 class 为 container 的元素的**第一层**<p>，不选中其子 div 里的<p> -
nav > a：只匹配<nav>标签下**直接子级**的<a>，不匹配<nav><div><a></a></div></nav>中的链接
和后代选择器（空格）的区别
很多人混淆 > 和空格。空格是“后代选择器”，匹配任意层级的后代；> 是“子选择器”，只认亲生儿子，不认孙子、重孙。
-
section p→ 匹配section内所有p（不管几层嵌套） -
section > p→ 只匹配section的直接子p，中间不能隔其他标签
实际使用中的注意事项
子选择器对 HTML 结构敏感，写之前先确认 DOM 层级是否符合预期。
立即学习“前端免费学习笔记（深入）”；
- 如果父元素里有文本节点或注释，它们不算“元素”，不影响
>判断 -
div > *可以选中div下所有直接子元素（通配），适合清样式或统一控制 - 多个层级可连用，比如
article > header > h1，但要小心结构变动导致失效
常见误用场景提醒
不是所有“看起来是子元素”的情况都适用子选择器。
- 表格中
table > tr是错的——因为标准 HTML 要求tr必须在tbody或thead内，所以应写table > tbody > tr或用table tr - Flex/Grid 容器的直系子项虽视觉上是“孩子”，但 CSS 结构仍按 HTML 原始嵌套判断，别被布局效果误导
- 动态插入的内容如果结构不同（比如 JS 插入了 wrapper div），子选择器会自动失效，需同步调整 CSS 或改用更稳健的选择方式
