CSS中真正表达“关系”的组合子选择器只有4个：空格（后代）、>（子代）、+（相邻兄弟）、~（通用兄弟）；逗号是分组而非组合子；后代选择器匹配任意嵌套层级，子代选择器仅匹配直接子元素，兄弟选择器要求同父同级且顺序正确。
CSS里真正能表达“关系”的组合子选择器只有 4 个：空格（后代）、>（子代）、+（相邻兄弟）、~（通用兄弟）。逗号 , 是分组，不算组合子——它不描述结构关系，只做样式复用。
后代选择器（空格）最常用也最容易误用
写成 .card p 这种形式，会匹配 .card 内部任意嵌套层级的 p，哪怕中间隔了 5 层 div 也照样生效。
- 适合容器内统一样式，比如统一设置文章区域所有段落行高
- 但性能开销略高，浏览器需递归遍历整棵子树
- 容易意外命中深层嵌套内容，比如侧边栏里的
p也被改了 - 别写成
.card > p却误以为是后代——符号错了就完全不是一回事
> 子代选择器只认“亲儿子”
.nav > ul > li 这种链式写法，要求每个 > 左右两边的元素必须是直接父子关系。一旦中间插了个 div，后面整个链就断了。
- 常用于菜单一级项、表单直系控件等需要精确控制层级的场景
- 比后代选择器性能好，浏览器只需查一层子节点
- 注意：
div > p不会匹配xxx
p - 多个
>连用时，可读性下降，建议拆成更语义化的类名
+ 和 ~ 兄弟选择器都要求同级同父
这两个必须满足两个硬条件：A 和 B 元素得在 DOM 中处于同一父容器下，且顺序上 A 在前、B 在后。
-
h2 + p只选紧挨着h2的第一个p；中间插个img就失效 -
input:focus ~ label会选中同一父级下所有在该input后面的label，不管隔了几层其他元素 - 它们无法跨父容器工作，比如
header + main在下才有效，嵌套在里就匹配不到 - 实际项目中，
~比+更容易引发意料外的样式扩散
真正难的不是记住这四个符号，而是每次写之前想清楚：你到底要匹配“所有后代”，还是“仅限直系”，抑或“仅限后面这几个同级”。DOM 结构稍一变动，> 和 + 就会静默失效，而空格和 ~ 却可能悄悄多选中一些东西——这种隐性行为才是调试时最耗时间的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
