子选择器用“>”连接父、子选择器，仅匹配直接子元素，不穿透后代；如ul > li只选ul的直属li，区别于空格的后代选择器。

用 > 符号，写成 父选择器 > 子选择器，就能只选中直接子元素，不穿透到更深层的后代。

子选择器的基本写法

子选择器用大于号 > 连接两个选择器，表示“紧挨着下一级”的关系。它不会匹配嵌套更深的元素。

• ul > li：只选中

  的直接

• ，不选中

  里

  内的

• .container > p：只选中 class 为 container 的元素的**第一层**

  ，不选中其子 div 里的

• nav > a：只匹配

  标签下**直接子级**的 ，不匹配

  中的链接

和后代选择器（空格）的区别

很多人混淆 > 和空格。空格是“后代选择器”，匹配任意层级的后代；> 是“子选择器”，只认亲生儿子，不认孙子、重孙。

• 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 或改用更稳健的选择方式

https://www.php.cn/faq/1991783.html