SOY模板+SASS项目：自定义CSS被覆盖及外部CSS优先级确认咨询

遇到这种自定义样式被SASS生成的CSS覆盖的问题，不用慌——浏览器开发者工具和CSS优先级规则就是理清覆盖关系的核心工具，下面给你拆解具体方法：

1. 用浏览器开发者工具精准定位覆盖来源 #

这是最直接的方法，几乎所有现代浏览器（Chrome、Firefox、Edge）都支持：

• 右键点击页面上样式失效的元素，选择「检查」（或者按F12/Ctrl+Shift+I打开开发者工具）
• 在右侧的Styles面板中，会列出所有应用到该元素的样式规则，每条规则都会标注来源文件（比如generated-styles.css:123）和行号
• 被划掉的样式就是被其他规则覆盖的，你可以清晰看到是哪个外部CSS文件的哪条规则把你的自定义样式压下去了
• 很多浏览器还会在面板底部显示当前选择器的特异性权重（比如(0,1,2)代表0个ID、1个类、2个元素），权重高的规则会优先生效

2. 验证CSS选择器的优先级规则 #

CSS的覆盖逻辑核心是「优先级」，搞懂这个比盲目加!important有用得多：

• 优先级从高到低排序：!important声明 > 行内样式（style="..."） > ID选择器（#xxx） > 类/伪类/属性选择器（.xxx/:hover/[type="text"]） > 元素/伪元素选择器（div/::before）
• 把你的自定义选择器和SASS生成的选择器做对比：比如对方用了#main .content .btn（权重120），而你只用了.btn（权重10），那对方的规则必然覆盖你的，哪怕你加了!important，如果对方也加了，还是对方的生效
• 可以手动计算权重：每个ID算100，类/伪类算10，元素算1，把选择器里的对应项加起来，数值大的优先级更高

3. 确认CSS文件的加载顺序 #

浏览器会按照CSS文件在HTML中被引入的顺序来应用样式——同权重的选择器，后面加载的文件里的规则会覆盖前面的：

• 打开开发者工具的Network面板，刷新页面，找到所有CSS文件，看它们的加载顺序
• 如果你的自定义CSS是在SASS生成的CSS之前加载的，那就算选择器权重一样，对方的规则也会覆盖你的，这时候调整HTML里的引入顺序（把你的自定义CSS放在最后）就能解决大部分问题
• 要是没法调整加载顺序，就只能提升自定义选择器的权重，比如给选择器加上父元素的ID或类，比如把.btn改成#main .btn，权重从10变成110，就能压过对方的.btn

4. 排查!important失效的特殊情况 #

有时候加了!important还是没用，可能是这几个原因：

• 对方的样式不仅加了!important，还使用了权重更高的选择器（比如对方是#header .nav-item !important，你是.nav-item !important，对方权重更高）
• 你的!important语法错误，正确写法是color: #fff !important;（感叹号要在属性值后面、分号前面）
• 样式是继承来的：如果父元素的样式被加了!important，子元素继承的样式优先级很低，这时候你需要直接给子元素写样式，而不是依赖继承

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