子代选择器（>）只匹配直接子元素，需确保目标元素是父元素的第一层子级；配合类名、属性或伪类可提升精准度，避免与后代选择器混淆。

遇到 CSS 无法选中特定子元素的情况，通常不是选择器“失效”，而是层级关系没理清、选择器写法不匹配，或 HTML 结构与预期不符。用对 子代选择器（>） 是解决这类问题最直接有效的方式之一——它只匹配**直接子元素**，不穿透嵌套，能避免误选、提升精准度。

确认结构是否真为“直接子级”

子代选择器 > 要求目标元素必须是父元素的**第一层子元素**，中间不能隔层。比如：

• .container > p 只会选中

  ✓

  中的 p
• 如果写成

  ✗

  ，这个 p 就不会被选中

建议在浏览器开发者工具中右键检查元素，逐层展开看 DOM 层级，确认目标元素是否真的挂在你写的父选择器下。

别把子代选择器和后代选择器搞混

常见误区：用空格（后代选择器）代替 >，结果选中了不该选的深层元素。

• .list li → 匹配所有后代 li（包括嵌套多层的）
• .list > li → 只匹配 .list 下的**直接子 li**（如菜单一级项，排除下拉子菜单）

如果你只想控制第一级列表项样式，而不想影响二级弹出菜单，> 就是刚需。

配合类名或属性进一步缩小范围

单靠 > 有时还不够，尤其当多个同级元素类型相同时。可以组合使用：

• .card > .title —— 只选 .card 下带 .title 类的直接子元素
• nav > a[href^="/"] —— 只选 nav 下 href 以 "/" 开头的直接子链接
• ul > li:first-child —— 第一个直接子 li，常用于首项加图标或去边框

注意伪类和伪元素的书写顺序

子代选择器要放在最外层，伪类/伪元素写在最后。错误写法：.box > :first-child（可能意外命中非预期元素）；推荐更明确的写法：

• .box > h2:first-child —— 确保只选第一个子 h2
• .item > span::before —— 给直接子 span 添加装饰性内容

避免用 :nth-of-type 或 :first-child 单独搭配 > 时忽略兄弟元素类型差异，必要时用 :nth-child(n of selector)（现代支持良好）。

基本上就这些。子代选择器本身不复杂，但容易忽略它的“严格层级”特性。理清 DOM 树、少依赖空格、多用浏览器实时验证，90% 的“选不中”问题都能快速定位解决。