子代选择器（>）只匹配直接子元素，需确保目标元素是父元素的第一层子级；配合类名、属性或伪类可提升精准度，避免与后代选择器混淆。
遇到 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% 的“选不中”问题都能快速定位解决。
