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 同时存在时，仍按来源和特异性排序。
