CSS样式优先级由!important、来源和选择器特异性三者共同决定；行内样式最高，其次为style标签、.css文件、浏览器默认样式；同源时比特异性（ID=100、类=10、元素=1）；!important仅限同类型来源间生效，且不可继承。
CSS 样式优先级不是“谁写在后面就赢”，而是有一套明确的计算规则——直接看 !important、来源、选择器特异性（specificity）三者叠加的结果。
怎么快速判断两个 color 哪个生效？
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里找被划掉的那条声明：它被更高优先级的同名样式覆盖了。重点看每条样式右边的来源标记：inline > style 标签 > .css 文件 > 浏览器默认样式。
-
!important会提升单条声明的权重，但仅限于同类型来源（比如两个都是外部 CSS 里的!important，才比没有的高） - 行内样式（
style="color: red;"）天然高于所有外部或内部样式表中的规则，哪怕后者用了!important - 同来源下，比的是选择器特异性：
#header .nav a:hover比.nav a高，因为 ID 选择器（100）+ 类（10）+ 元素（1）= 111，后者只有 11
!important 到底该不该用？
它能强制覆盖，但会破坏层叠逻辑，让调试变困难。只在以下场景可考虑：
- 第三方库样式侵入太深，又无法改源码（如某些 UI 组件库的内联样式）
- 需要在用户样式表（user stylesheet）中强制干预页面（极少见）
- 临时调试时加，确认问题后必须删掉
注意：!important 不继承，也不影响其他属性；多个 !important 同时存在时，仍按来源和特异性排序。
立即学习“前端免费学习笔记（深入）”；
为什么加了 class 还没生效？常见陷阱
不是 class 没写对，就是被更“重”的规则压住了。检查这几处：
- 拼写错误：
class="btn-primary"但 CSS 里写成.btn-prmiary（typo） - 作用域限制：Vue/React 中 scoped style 或 CSS Modules 会自动加属性选择器，
.btn实际编译成.btn[data-v-xxx]，无法被全局 JS 动态添加的 class 匹配 - 媒体查询未命中：
@media (max-width: 768px) { .btn { display: none; } }在桌面端自然不生效 - 伪类顺序错：
a:link、a:visited、a:hover、a:active必须按 LVHA 顺序写，否则:hover可能被:link覆盖
真正卡住的时候，别猜，开 DevTools 看 computed 样式，逐条往上点 Sources，看清哪一行被划掉、为什么被划掉——特异性数字、!important、来源路径，全在那里摆着。
