SCSS本身不改变CSS优先级规则，所有权重提升均源于人为构造更高特异性；&嵌套会意外拉高权重，因其展开父选择器完整形式（含空格或关系符），导致编译后选择器层级和权重飙升；真正可控的提权方式是双类名、属性选择器、:where()降权兜底，避免!important混用，并优先利用CSS Modules或scoped机制实现样式隔离。
直接说结论：SCSS本身不改变CSS优先级计算规则，所有“叠加”都是人为制造更高特异性（specificity）的结果，关键在于控制选择器结构，而不是依赖嵌套语法糖。
为什么 & 嵌套会意外拉高权重
SCSS里的 & 不是字符串拼接，而是展开父选择器的完整形式。一旦父选择器含空格或关系符，& 就会把它们一并带上，导致编译后选择器权重飙升。
-
.card > .header { &__title { font-size: 18px; } }编译为.card > .header__title—— 看似合理，但实际权重是 (0,0,1,1)，和.card__title（权重 0,0,1,0）相比多了一个标签选择器，容易覆盖其他地方的同名类 - 更危险的是：
.form .field .input { &::placeholder { color: #999; } }编译成.form .field .input::placeholder，权重 (0,0,1,3)，远超单个.input::placeholder - 浏览器开发者工具里会标黄提示“选择器过长”，Firefox 可能触发重排降级
真正可控的提权方式有哪些
别堆嵌套，用语义明确、可预测的组合方式提升权重，同时保持可维护性：
- 双类名：
.input.input--error→ 权重 (0,0,2,0)，比.input高一级，且不依赖 DOM 结构 - 属性选择器：
input[data-status="error"]→ 权重 (0,0,1,1)，和类选择器同级但更精准，适合状态驱动场景 -
:where()降权兜底：:where(.theme-dark) .input→ 权重等同于.input，只用于限定作用域，不参与竞争 - 避免
!important换行写法：border-color: #ff4d4f !important;要么全属性加，要么全不加；混用会导致部分属性被覆盖而难以排查
如何判断是不是真需要提权
先确认冲突根源，再决定是否提权。很多时候问题不在权重，而在样式作用域或加载顺序：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Computed 面板，看目标属性旁有没有删除线；点开右侧箭头，查 Specificity 值和来源路径
- 检查是否被内联样式覆盖：
element.style权重是 (1,0,0,0)，!important也压不住，得改 JS 或清掉 style 属性 - 确认 CSS 加载顺序：Vite 中
import './global.scss'写在组件样式前，全局样式就天然有更低权重；反之则容易反向覆盖 - 第三方库（如 Ant Design）的样式通常带高权重类名（
.ant-btn-primary），硬提权不如用其暴露的 SCSS 变量重写主题色
最常被忽略的点：提权不是目的，隔离才是。CSS Modules 自动加哈希后缀，Vite 的 scoped 模式靠属性选择器隔离，这些机制本身就在降低对权重操作的依赖——优先用好它们，比手写三层嵌套更可靠。
