原生 CSS 嵌套中必须使用 & 表明父选择器延伸，否则整条规则被忽略；& 必须紧贴开头且不可连续或居中；伪类/伪元素须紧跟 & 右侧；BEM 场景应避免多层嵌套导致非扁平选择器。
原生嵌套里不写 & 就是无效 CSS
浏览器会直接忽略整条规则，不是“样式不生效”，而是压根不解析。比如 .card { p { color: red; } } 看起来合理，但原生 CSS 会当作语法错误跳过——p 开头没带 &、:、:: 或 [ 等合法前缀，不符合 Nesting 规范。
必须显式用 & 表明这是父选择器的延伸：
-
.card { & p { color: red; } }→ 编译为.card p -
.card { &.active { background: #eee; } }→.card.active -
.card { & > h2 { font-weight: bold; } }→.card > h2
漏掉 & 是最常见也最隐蔽的错误：控制台不会报错，开发者只会纳闷“为什么样式没上”。
& 必须紧贴开头，空格位置决定语义
& 前后有没有空格，直接改变最终生成的选择器结构。它不是“可有可无的装饰符”，而是解析器判断组合关系的关键分界点。
-
.card { & h2 { } }→:is(.card) h2（后代） -
.card { .featured & { } }→.featured :is(.card)（.featured 内任意层级存在 .card 元素） -
.card { &.featured { } }→:is(.card).featured（同元素同时含两个 class） -
.card { & + & { } }→.card + .card（相邻兄弟）
写成 .card { &.featured & { } } 是非法的：& 不能连续出现，也不能出现在中间或末尾。
伪类和伪元素必须跟在 & 后面，顺序不能颠倒
&:hover 合法，:hover 单独写非法；&::before 合法，&::before:hover 非法——因为伪元素本身不能附加伪类，浏览器会静默丢弃该规则。
- ✅
&:hover、&:focus-visible、&::after、&:not(:disabled) - ❌
:hover（无 &）、&:hover::before（伪类后接伪元素，部分浏览器支持但非标准）、&::before:hover（伪元素后接伪类，违反规范） - ⚠️
&:hover:active合法（同元素多伪类），但&:hover :active是后代选择器，语义完全不同且通常无意义
顺序错位不会报错，但结果不可控。建议所有伪类/伪元素都紧贴 & 右侧，中间不加空格。
BEM 场景下 &__item--mod 不能靠嵌套生成
想写 .block__item--mod，不要用两层嵌套：.block { &__item { &--mod { } } }。这会编译成 .block .block__item .block__item--mod，破坏 BEM 的扁平命名约定。
正确做法只用一层 &：
- ✅
.block { &__item--mod { color: red; } }→.block__item--mod - ✅
.block { &__item { color: blue; } &--disabled { opacity: .5; } } - ❌
.block { &__item { &--mod { } } }（生成带空格的后代选择器）
原生嵌套里的 & 是纯字符串替换，不理解 BEM 意图。它只管拼接，不管语义是否合理——最终选择器合不合法、语义对不对，全靠你手动校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
