bootstrap 5.3+ 大量使用 !important 锁定关键状态样式，需同步覆盖 border-color、box-shadow 等关联属性；响应式类如 d-none 易被外部 !important 规则压制导致断点失效；优先用 css 变量（如 --bs-primary）替代 !important 覆盖，更干净可控。
Bootstrap 5.3+ 大量用 `!important` 锁死关键状态样式
不是你写得不够具体，是 Bootstrap 自己在 :focus-visible、:disabled、.btn:active 等状态里批量加了 !important。它不只给 background-color 加，还同步锁住 border-color、box-shadow、outline —— 你改一个，其他三个还在生效，视觉上还是“没变”。
常见错误现象：
- DevTools 里你的
background-color: #dc2626 !important被划掉，来源却是bootstrap.min.css - 按钮正常态变红了，但鼠标一 hover，又弹回默认蓝
- 点击后阴影消失不了，因为
box-shadow: none !important没跟上
响应式类（如 d-none）被 `!important` 堵死
Bootstrap 的 d-none 本身带 !important，本意是“强隐藏”。但如果你在别处写了 .sidebar { display: flex !important }，这条规则权重更高、且无媒体查询，就会把所有断点下的 d-md-block、d-lg-none 全部压住——结果就是响应式失效，小屏也不隐藏。
验证方法：
- 打开 DevTools → Computed → 找
display值，看它标着哪个来源 +!important - 手动删掉疑似冲突的
!important声明，立刻看断点是否恢复 - 注意：Vue/React 中动态绑定
class时，d-none d-md-block叠加逻辑完全依赖 CSS 层叠顺序，一旦被外部!important插队，就彻底失效
用 CSS 变量比狂加 !important 更干净
Bootstrap 5.3+ 已把按钮、提示框、表单控件等核心组件迁移到 CSS 变量驱动，比如 --bs-primary、--bs-tooltip-bg。直接覆盖变量，不用管伪类、不用猜权重。
实操要点：
- 变量必须作用于目标元素或其祖先，例如
.my-btn { --bs-primary: #7c3aed; }或.my-form .btn-primary { --bs-primary: #7c3aed; } - 别只改
--bs-primary：.btn-primary还依赖--bs-primary-rgb，否则文字对比度可能不达标（WCAG 失败） - 对
.tooltip类型组件，要同时设--bs-tooltip-bg和--bs-tooltip-color，否则内容不可读
真正该加 !important 的地方其实很少
多数人加 !important 是因为没看清 Computed 面板里哪条规则在生效、为什么被划掉。真正合理使用场景只有三类：
- 覆盖第三方库的内联样式（如
style="color: #409eff;"），普通选择器根本匹配不到 - 支持用户自定义高对比度样式表（WCAG 合规必需），此时你自己的
color也得加!important才能不被用户规则压垮 - CI 构建产物中做紧急热修复（如 Percy 视觉回归失败），且必须通过构建变量控制，确保不进生产代码
最容易被忽略的是：Bootstrap 的 Sass 编译过程可能偷偷注入 !important（比如用 @extend 或嵌套 !important 规则），这类问题不会出现在源码里，只在构建后 CSS 中爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
