多类选择器匹配元素时，SCSS/LESS如何确定样式优先级？

首先明确：不管是LESS、SCSS还是原生CSS，样式的最终应用都遵循CSS选择器优先级规则——预处理器只是语法糖，最终都会编译成原生CSS，优先级由编译后的选择器结构决定。

优先级计算逻辑 #

优先级按四个层级加权计算，权重从高到低：

• 内联样式（style="属性: 值"）：权重 1000
• ID选择器（#example）：权重 100
• 类/伪类/属性选择器（.class、:hover、[type="text"]）：权重 10
• 元素/伪元素选择器（div、::before）：权重 1

相同层级的选择器数量越多，总权重越高。权重相同时，后定义的样式会覆盖先定义的。

你的示例拆解 #

先看编译后的原生CSS代码：

.class1 {
    color: green;
}

.modal .class1 {
    color: red;
}

• .class1 的总权重：1个类选择器 → 10
• .modal .class1 的总权重：2个类选择器 → 10 + 10 = 20

因为 20 > 10，后者优先级更高，所以不管你调整这两个样式的定义顺序，.class1 元素的文本颜色都会是红色。

额外提示 #

如果想让 .class1 的绿色生效，可以：

• 提升它的优先级，比如写成 body .class1（总权重20）
• 避免使用 !important（虽然能强制生效，但会打乱正常优先级逻辑，后期维护难度大）

内容的提问来源于stack exchange，提问作者mcool