必须写&:hover，否则解析为孤立:hover被浏览器忽略；&是编译期字符串拼接锚点，零空格、零换行、零注释，顺序错或位置错均导致整条规则静默失效。
原生 CSS 嵌套中，& 不是可选语法糖，而是编译期字符串拼接锚点；省略它、加空格、放错位置，都会导致浏览器直接忽略整条规则——不是样式不生效，是压根没进样式表。
为什么 :hover 必须写成 &:hover
原生嵌套不支持“隐式父级绑定”。写 .card { :hover { color: red; } } 会被解析为孤立的 :hover，浏览器报 Invalid CSS 并跳过整个规则块。只有显式写 &:hover，才能让解析器知道：这是要把 :hover 拼到 .card 后面，生成合法的 .card:hover。
-
.btn { &:focus { outline: 2px solid blue; } }→ 编译为.btn:focus -
.btn { :focus { outline: 2px solid blue; } }→ 编译为:focus，无效 - Chrome 119+、Firefox 120+、Safari 17.2+ 才支持该语法；旧版静默忽略整个嵌套块
& 和空格之间零容忍
& 不是变量，是编译期字符串拼接锚点。它和后续内容之间必须零空格、零换行、零注释，否则语义立即错位。
- ❌
.link :hover（&后有空格）→ 解析为后代选择器，匹配子元素悬停 - ✔️
.icon::before &::before（紧贴无空格）→ 生成.icon::before - ❌
.icon ::before（中间有空格）→ 解析为后代伪元素，非本体 - 冒号前一旦有空格，
&就退化为普通选择器前缀，失去绑定能力
伪类和伪元素组合时 & 的顺序不能颠倒
CSS 规范禁止伪元素响应伪类，所以 &::before:hover 是非法语法，现代浏览器会直接丢弃该规则或报错。
- ✔️
&:hover::before（悬停时插入伪元素） - ❌
&::before:hover（伪元素无法触发:hover） - ✔️
&[disabled]:focus→.input[disabled]:focus - ❌
&:focus[disabled]（属性选择器不能后置在伪类之后） - 顺序本质是选择器优先级链：状态 → 属性 → 伪元素，
&必须在最前端启动这个链条
BEM 场景下 &__item--mod 为什么不能嵌套写
试图用多层嵌套生成 BEM 修饰符，比如 .block { &__item { &--mod { } } }，结果会产出带空格的选择器：.block .block__item .block__item--mod——这既不是合法 BEM 类名，也无法匹配单个元素。
- 正确写法：
.block { &__item--mod { color: red; } }→.block__item--mod - 原生 CSS 嵌套不支持插值，BEM 修饰符必须直属于块级选择器，不可通过嵌套“推导”
- 想动态拼接？得用预处理器（如 Sass 的
#{&}__item--mod），但原生嵌套做不到 - 最易被忽略的是：
&展开的结果是否合法，全靠你手动保证；浏览器不会提示，只会静默失效
所有这些限制都源于一个事实：& 在原生嵌套中只是字符串替换，不理解 DOM 结构、不校验语义、不报错提示——它展开什么，浏览器就收什么；错一个字符，整条规则就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
