bootstrap 5 大量使用 !important 是为保障组件样式契约与 api 稳定性，仅作用于关键属性（如 .btn 的 display/padding/border），不覆盖 font-size 等可扩展属性；其优先级仍低于内联样式，且响应式类无 !important，覆盖需遵循特异性、@layer 或同步处理伪类状态。
Bootstrap 5 为什么在源码里大量用 !important
因为它把 !important 当作“样式契约”的一部分，不是为了偷懒，而是为了封住组件行为被意外覆盖的缺口。
比如 .btn 的 display、padding、border 都带 !important，目的很明确：防止业务层随便加个 .my-btn { padding: 0; } 就让按钮塌陷或错位。它牺牲了部分可扩展性，换来了组件 API 的稳定性。
这不是 bug，是设计选择——就像 React 把 setState 设为异步一样，属于框架层对开发者行为的约束。
!important 在 Bootstrap 5 中的实际作用边界
它只管“自己负责的属性”，不越界，也不兜底：
-
.btn-primary的background-color和border-color带!important，但font-size不带——说明字体大小允许业务层自由覆盖 -
.d-none的display: none !important有效，但若你写了style="display: block"，它照样被内联样式压掉（因为内联样式优先级 >!important） - 响应式类如
d-md-block没有!important，所以和d-none共存时，谁后加载、谁更具体，谁赢
想覆盖 Bootstrap 5 的 !important 样式，必须匹配它的“游戏规则”
直接写 .btn-primary { background-color: red; } 无效；但以下方式能生效：
- 在 Bootstrap CSS 引入之后，用同样带
!important的规则，且选择器特异性不低于原生（比如加个.my-app .btn-primary） - 用
@layer显式声明更高层级（如@layer overrides { .btn-primary { background-color: red; } }），前提是整个项目已启用级联层且顺序正确 - 改用内联样式（
style="background-color: red"），但它会破坏伪类状态（:hover、:active）的样式继承
最容易被忽略的是：Bootstrap 的 :active 状态样式本身也依赖 !important，如果你只覆盖了普通态，没同步处理 :active 和 .active 类，点击时颜色会闪回默认色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
