scss中&:hover权重过高源于&完整展开父选择器路径，而非仅拼类名；&必须紧贴伪类无空格，否则报错；非法伪类组合浏览器会忽略；html与scss class名不匹配是hover失效主因。
SCSS里&:hover编译出的选择器权重太高
根本原因是&会完整展开父选择器路径，不是只拼类名。比如在三层嵌套里写.layout .card { &__title { &:hover { } } }，最终生成的是.layout .card .card__title:hover（权重 0,3,1），而不是你想要的.card__title:hover（0,1,1）。这种高权重会让后续样式很难覆盖，哪怕加.card__title--highlight也得用!important才能赢过它。
常见踩坑点：
- 在
@media块里继续嵌套&:hover，路径直接爆炸，比如@media (min-width: 768px) { .dashboard .card { &__title { &:hover { } } } }→ 编译出@media { .dashboard .card .card__title:hover { } } - 用ID或属性选择器当父级，比如
#header { &:hover { } }→#header:hover权重高达 101，基本锁死覆盖 - 想复用悬停逻辑却硬塞进深层嵌套，不如抽成独立工具类：
.u-hover-scale { &:hover { transform: scale(1.02); } }
&后多一个空格就彻底失效
&不是变量，是编译期字符串锚点，必须紧贴前一个字符。任何空格、换行、制表符都会让它“断连”。
错误写法示例：
-
.btn { & :hover { } }→ 报错SassError: Invalid CSS after "&": expected "{", was ":hover" -
.modal { &\n:hover { } }→ 解析失败，Sass直接拒编 -
.card { & .header { } }→&没参与拼接，编译结果是.card .header，但语义上你本意可能是.card__header
正确写法只有一种：.btn { &:hover { } }，&和:hover之间**不能有任何空白字符**。
hover嵌套生成了非法选择器
伪类和伪元素有严格顺序规则，&只是字符串拼接，不校验合法性。写错顺序，编译器不会报错，但浏览器直接丢弃整条规则。
典型非法组合：
-
&::before:hover→ 伪元素不能挂伪类，浏览器无视 -
&:not(.active):hover→ 看似合理，但:not()内嵌套:hover是语法错误，CSS规范不支持 -
&:hover--active→&后跟--会被当作文本拼接，生成.btn:hover--active，非法选择器
安全写法只有：&:hover::before（元素 hover 时才渲染伪元素）、&.is-active:hover（状态类+伪类并列）。
HTML class名和SCSS产出的选择器对不上
SCSS编译只管你写了什么，不管HTML有没有对应结构。90%的“hover不生效”，其实是class名脱节。
例如：
- SCSS写
.card { &__body { &:hover { } } }→ 输出.card__body:hover - 但HTML是
<div class="card"><div class="body"></div></div>→.card__body根本不存在，规则白写
修复路径只有两个：
- 改HTML：把
class="body"改成class="card__body" - 改SCSS：放弃BEM拼接，写
.card .body:hover { }，但要注意权重升高
真正卡住人的从来不是语法会不会写，而是删掉一层嵌套后，HTML里那个class还存不存在——不存在，嵌套再漂亮也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
