SCSS中&嵌套伪类易导致选择器权重异常升高，因&会展开完整父路径而非仅类名，应避免深层嵌套中使用&:hover，改用语义化工具类或顶层声明。
SCSS里用&写:hover、:focus为什么会生成错误权重？
因为 & 在嵌套中会完整展开父选择器路径，不是只拼类名。比如 .btn { &.is-active:hover { } } 编译出 .btn.is-active:hover（权重 0,2,1），但若写成 .btn { &:hover { } }，结果是 .btn:hover（0,1,1）——看似一样，可一旦父级本身是深层嵌套，& 就会把整条路径拖进来。
常见错误现象：.modal .content .form { &:hover { color: red; } } 输出 .modal .content .form:hover，权重 0,3,1；而你本意可能只是想给 form 元素加悬停态，却意外比 .form--highlight（0,1,0）高两级，导致后面改样式必须加 !important 或更深层嵌套来覆盖。
- 伪类绑定必须紧贴单个语义类，避免
&前有空格或复合父选择器 - 禁止在 ID 或属性选择器后用
&:hover，如#header { &:focus { } }→#header:focus权重飙升到 100+，基本锁死后续覆盖 - 想复用悬停逻辑？抽成工具类
.u-hover-text-red { &:hover { color: red; } }，再单独加到目标元素上
多个:not()嵌套进SCSS时为什么样式直接失效？
:not() 不支持嵌套，SCSS 里写 .item { &:not(:not(.active)) { } } 或 &:not(.a):not(.b:hover) 都会编译出非法选择器，浏览器直接丢弃，devtools 里该规则灰掉，控制台无报错。
真正能通过编译且生效的只有「单层 :not() + 简单选择器」。SCSS 中要安全使用，必须把逻辑拆到外层判断。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.list { li:not(.first):not(.last) { } }→ 编译为.list li:not(.first):not(.last)，语法合法但语义易错（同时不含两个类才匹配） - 正确拆解：
.list__item:not(.list__item--first):not(.list__item--last) { }，用 BEM Modifier 明确状态，不依赖 DOM 位置 - 需要“排除某类组合”？写成
:not(.disabled.required)，而不是:not(.disabled):not(.required)—— 后者是“既不 disabled 也不 required”，前者是“不同时具备这两个类”
媒体查询内嵌套伪类，为何CSS体积暴涨还难调试？
@media 块里继续用 &:hover，& 会展开全部外层嵌套路径。比如在 @mixin card-layout { .card { .header { &__title { &:hover { } } } } } 里调用，最终可能生成 @media (min-width: 768px) { .layout .dashboard .card .header__title:hover { } } —— 6 层选择器，权重高、体积大、HTML 结构一动就断。
- 响应式交互样式，优先提取到顶层，用媒体查询包裹完整语义类：
@media (min-width: 768px) { .card__title:hover { } } - 避免在
@media内部再写嵌套结构，尤其别让&跨过媒体查询边界 - 如果必须条件化伪类行为（比如移动端禁用 hover），用 JS 切换 class 更可控：
document.body.classList.add('is-touch')，然后写.is-touch .btn:hover { pointer-events: none; }
BEM下如何安全绑定伪类而不破坏模块隔离？
BEM 的核心是每个样式只认一个 class，伪类也得遵守。写 .btn { &:hover { } } 没问题，但写 .btn { .icon { &:hover { } } } 就违规了——.icon 是另一个 Block 或 Element，不该由 .btn 的嵌套来控制它的交互态。
- 每个 Element 自己管自己的伪类：
.btn__icon:hover，而不是靠父级嵌套推导 - Modifier 用于状态，不是布局：用
.btn--hovered配合 JS 切换，比纯 CSS:hover更利于测试和 SSR 一致性 - 兄弟元素交互（如
.input:focus + .label）必须显式写出完整类名：.form__input:focus + .form__label，不能依赖嵌套缩写
:not() 或一层 & 展开，都可能让权重从 0,1,1 跳到 0,3,1，后续维护者根本看不出哪条规则赢了——只能靠删代码试。 
