必须写&，否则CSS嵌套中:hover等伪类会被解析为后代选择器而非自身状态；&是作用域绑定标识，需紧贴伪类/伪元素且中间不能有空格，否则语义错位或规则失效。
不写&会导致选择器语义完全错位
原生CSS嵌套中直接写:hover或::before，浏览器会把它当作独立选择器处理——不是“当前元素悬停”，而是“当前元素内部任意被悬停的子元素”。比如在.card块里写:hover，编译/解析后实际匹配的是.card :hover（注意空格），这既无效又违背本意。
&是唯一能绑定到父选择器本身的语法锚点
&不是可选符号，它是CSS Nesting规范强制要求的“作用域绑定标识”。它的作用不是“代表父级”，而是“把后续伪类/伪元素拼接到当前选择器字符串末尾”。没有它，解析器无法判断你是想修饰自身还是后代。
-
&:hover→.btn:hover -
&::before→.btn::before -
&[disabled]:focus→.btn[disabled]:focus
所有这些都依赖&作为拼接起点。省略它，就等于放弃对选择器结构的控制权。
空格是致命分水岭：&:hover ✔️ vs & :hover ❌
冒号前加空格，&就失去绑定能力，退化为后代选择器前缀：
立即学习“前端免费学习笔记（深入）”；
-
&:hover编译为.card:hover -
& :hover编译为.card :hover（匹配.card内任意:hover元素） -
&::before正确；& ::before虽然可能渲染成功，但语义已偏移为“后代伪元素”
这种差异在复杂组件中极易引发样式泄漏或失效，且调试时很难一眼识别。
伪元素和伪类不能混序：&::before:hover非法
CSS规范禁止伪元素响应伪类，所以&::before:hover在原生嵌套中直接报错或静默忽略。正确顺序只能是状态前置、伪元素后置：
-
&:hover::before✔️（悬停时插入伪元素） -
&::before:hover❌（伪元素无法触发:hover）
这个限制和&无关，但它放大了&位置错误的风险——一旦误把&放在伪元素后面，整个规则就不可用。
真正容易被忽略的不是“要不要写&”，而是&必须紧贴伪类/伪元素，中间零空格、零换行、零注释干扰。它不像JS变量可以宽松处理，而是一个硬性语法边界，跨过去就脱离作用域。
