CSS中的!important规则是控制样式优先级的重要手段，当开发者需要打破默认的优先级规则，让某条样式声明强制生效时，就可以使用这个规则。它的核心作用是提升对应样式声明的优先级，使其高于同属性的其他正常声明。
!important的基本语法
!important需要添加在样式声明的属性值之后，分号之前，语法格式非常简单，下面是一个基础的使用示例：
/* 普通样式声明 */
.text {
color: blue;
}
/* 带!important的样式声明 */
.text {
color: red !important;
}
上述代码中，第二个.text选择器的color属性添加了!important，因此即使第一个选择器的优先级更高，最终元素的文字颜色也会是红色。
优先级计算规则
CSS的默认优先级规则是：内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素，而!important会打破这个规则，它的优先级高于所有不带!important的声明，甚至高于内联样式。
我们可以通过一个对比示例来验证这个规则：
/* 内联样式：color: green，优先级默认最高 */
/* 以下为样式表中的规则 */
#demo {
color: blue; /* ID选择器，优先级高于类选择器 */
}
.demo-class {
color: red !important; /* 类选择器加!important */
}
<div id="demo" class="demo-class" style="color: green;">测试文本</div>
最终这个div的文字颜色是红色，因为类选择器加!important的优先级高于内联样式的普通声明。
适用场景
!important并不是完全不能使用的规则，在以下场景中合理使用可以提升开发效率：
- 覆盖第三方库的默认样式：当引入的第三方组件样式优先级很高，无法通过正常选择器覆盖时，可以针对需要修改的属性添加!important。
- 定义全局基础样式：比如定义统一的禁用状态样式，确保不会被其他业务样式轻易覆盖。
- 临时调试样式：在开发调试阶段，快速强制某条样式生效，定位样式问题，调试完成后及时移除。
使用注意事项
虽然!important有适用场景，但滥用会带来很多问题，使用时需要注意以下几点：
- 不要滥用：如果大量使用!important，会导致样式优先级混乱，后续维护时需要不断添加更多的!important才能覆盖之前的规则，形成恶性循环。
- 避免覆盖继承样式：继承得到的样式优先级很低，不需要用!important去覆盖，直接写对应元素的样式即可。
- 注意声明的顺序：当两条同属性且都带!important的声明作用于同一个元素时，后定义的声明会生效，遵循后面的覆盖前面的规则。
示例代码演示
下面是一个完整的示例，展示不同场景下!important的生效情况：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>!important示例</title>
<style>
/* 元素选择器样式 */
.content p {
font-size: 14px;
}
/* 类选择器加!important */
.large-text {
font-size: 20px !important;
}
/* ID选择器样式 */
#special {
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">
<p class="large-text" id="special">这段文字的大小是20px</p>
</div>
</body>
</html>
上述示例中，p元素同时匹配了三个选择器，只有带!important的.large-text的font-size会生效，最终文字大小为20px。
CSS!important样式优先级前端开发层叠样式表修改时间：2026-07-07 06:48:10