省略&会导致浏览器解析为孤立:hover而报错忽略，因原生嵌套不支持隐式父级绑定；必须显式写&:hover才能生成合法选择器如.card:hover。
为什么省略 & 会导致规则被浏览器完全忽略
原生CSS嵌套不支持“隐式父级绑定”。写 .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+ 才支持该语法，旧版会静默忽略整个嵌套块
& 的位置和空格为什么是硬性边界
& 不是变量，是编译期字符串拼接锚点。它和后续内容之间**零空格、零换行、零注释**，否则语义立即错位。
-
&:hover✔️ →.link:hover -
& :hover❌ →.link :hover（后代选择器，匹配子元素悬停） -
&::before✔️ →.icon::before -
& ::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 - 想动态拼接？用
#{&}__item--mod，但需确保编译器支持（Sass 3.4+ 或 PostCSS 插件） - 原生 CSS 嵌套不支持插值，BEM 修饰符必须直属于块级选择器，不可通过嵌套“推导”
- 最易被忽略的是：
&展开结果是否合法，全靠你手动保证；浏览器不会提示，只会静默失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
