如何通过子元素选择器精确控制CSS，实现针对直接子节点的选择？

本文共计916个文字，预计阅读时间需要4分钟。

子选择器仅匹配直接子元素的元素，不匹配嵌套层级的元素。很多人写了+ ul + ul，这是错误的。

必须满足两个条件才触发：父元素选择器能精准定位到“真实父级”，且目标元素确实位于其下一级（不能隔层）。

• nav > a 只作用于 <nav><a>...</a></nav>，对 <nav><div><a>...</a></div></nav> 无效
• 空格和 > 完全不同：ul li 是后代选择器，ul > li 才是子选择器
• HTML 中换行、缩进、注释不会影响 DOM 层级，别被格式误导

常见误用：为什么 > 看似没反应

最常踩的坑是把语义父级当成了结构父级。比如用 CSS 框架时，.card 内部可能套了一层 div.card-body，这时 .card > p 就选不到任何内容——因为 p 的真实父级是 .card-body，不是 .card。