CSS的优先级决定了当多个样式规则作用于同一个元素时，哪条规则最终会生效。正常情况下优先级由选择器的特异性计算而来，而!important可以打破这个常规计算逻辑，强制让对应的样式声明拥有最高优先级。
CSS常规优先级计算规则
在没有!important的情况下，CSS优先级通过特异性分数计算，分数越高优先级越高，计算规则如下：
- 内联样式（写在元素的style属性中）：特异性分数为1000
- ID选择器：每个ID选择器加100分
- 类选择器、属性选择器、伪类：每个加10分
- 元素选择器、伪元素：每个加1分
- 通配符、继承的样式：特异性分数为0
当特异性分数相同时，后定义的样式会覆盖先定义的样式。下面是一个常规优先级的示例：
/* 特异性：1个元素选择器 = 1分 */
div {
color: black;
}
/* 特异性：1个类选择器 = 10分，高于上面的规则 */
.text {
color: red;
}
/* 特异性：1个ID选择器 = 100分，高于上面的规则 */
#content {
color: blue;
}
如果页面中有一个<div id="content" class="text">元素，最终文字颜色会是蓝色，因为ID选择器的优先级最高。
!important如何改变优先级
当在某个样式声明后添加!important时，这条声明的优先级会提升到最高，超过所有没有加!important的声明，甚至超过内联样式。优先级排序变为：
带!important的声明 > 内联样式 > 不带!important的高特异性选择器 > 不带!important的低特异性选择器
如果多个冲突的声明都加了!important，那么还是会按照常规特异性规则比较，特异性高的!important声明优先级更高。示例如下：
/* 普通元素选择器样式 */
p {
color: gray;
}
/* 带!important的元素选择器样式，优先级高于上面的规则 */
p {
color: orange !important;
}
/* 内联样式，优先级低于带!important的样式 */
/* <p style="color: green;">测试文字</p> 最终颜色是orange */
/* 带!important的类选择器样式，特异性高于带!important的元素选择器 */
.p-text {
color: purple !important;
}
如果元素同时匹配上面的p选择器和.p-text选择器，且两个样式都加了!important，最终文字颜色会是紫色，因为类选择器的特异性比元素选择器高。
!important的使用注意事项
虽然!important能快速解决样式冲突，但过度使用会带来很多问题：
- 会让样式优先级变得难以维护，后续修改样式时可能需要不断加!important才能覆盖原有样式，形成恶性循环
- 违背了CSS优先级的自然逻辑，让代码的可读性下降，其他开发者接手时很难理清样式生效规则
- 无法通过常规的选择器特异性提升来覆盖样式，增加了样式调试的难度
因此建议只在必要场景下使用!important，比如覆盖第三方库的默认样式，且无法通过提升选择器特异性实现的时候，或者在一些全局工具类样式中，确保样式一定能生效。日常开发中还是应该优先通过合理提升选择器特异性来解决样式冲突问题。
总结
!important的核心作用是打破常规CSS优先级计算规则，让对应的样式声明获得最高优先级，但它并不是解决样式冲突的首选方案。开发者需要先理解常规优先级的计算逻辑，在确实无法通过调整选择器来解决冲突时，再谨慎使用!important，避免给项目带来维护负担。
CSS!important优先级specificity修改时间：2026-06-08 19:57:16