CSS !important
多条规则同时命中同一元素时，浏览器按优先级裁决哪条声明生效，多数情况靠选择器权重即可分出胜负。但偶尔需要强制压过其他所有样式——这时就该 !important 出场。本节讲解它的用法、在优先级体系中的位置与使用禁忌。
什么是 !important
在一条声明的分号前加上 !important，它就获得最高优先级，无视来源与选择器权重：
p { color: red !important; } /* 强制所有段落为红色 */
之后任何普通规则——哪怕是 #id 选择器、哪怕写在内联 style 里——都无法覆盖它，除非对方同样带 !important 且权重更高或书写更靠后。
基本用法示例
最常见场景是覆盖第三方库样式，或在调试时临时压过其它规则：
/* 第三方按钮默认蓝色 */
.btn { background: blue; }
/* 我们强制覆盖成红色 */
.btn-danger { background: red !important; }
<button class="btn btn-danger">危险操作</button>
效果：按钮显示红色。两个 class 权重相同，本应“后写的覆盖先写的”，但 !important 让该规则无条件获胜。
与内联样式的较量
正常优先级排序为：!important > 内联 style > id 选择器 > class/属性选择器 > 标签选择器。演示它是唯一能压过内联的手段：
h1 { color: green !important; } /* 声明带 !important */
<h1 style="color: blue;">大标题</h1> <!-- 内联蓝色也被压过 -->
效果：标题最终显示绿色。若去掉 !important，则内联的 blue 获胜——可见它的“一票否决”分量。
何时使用与注意事项
- 不要在业务样式里到处加 !important，否则优先级体系形同虚设，后续谁都无法覆盖你的样式。
- 合理场景：覆盖 CDN 引入的第三方组件外观、快速原型演示、临时定位问题（用完记得删除）。
- 两条声明都带 !important 时，回到常规比较：id 优先于 class、class 优先于标签，权重相同则后出现者胜。
小结
!important 是 CSS 的“最终裁决”：强制某条声明生效，连内联样式都能压过。它的价值在于覆盖外来样式与紧急修正；滥用则会埋下“改不动”的坑——优先写更具体的选择器，实在不行再亮出这张底牌。