Bootstrap 5.3+ 多处使用 !important 导致单属性覆盖失效，应优先用更高特异性选择器或 CSS 变量覆盖，避免滥用 !important。
直接加 !important 通常无效——Bootstrap 5.3+ 在 :focus-visible、.btn:disabled 等关键状态里批量使用 !important，你改一个属性，它连带覆盖背景、边框、阴影三处，浏览器按声明顺序裁决，不是谁喊得响谁赢。
为什么你的 !important 被划掉却不起作用
DevTools 里看到你的样式被划掉，来源却是 bootstrap.min.css？这不是权重不够，是 Bootstrap 同一状态下了多条带 !important 的规则。比如 .btn-primary:focus 可能同时定义了：
background-color: #0d6efd !important;border-color: #0a58ca !important;box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
你只重写 background-color，其他两个仍生效，视觉上还是“没变”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 正常态颜色改了，
:hover或:disabled下又回退 - Computed 面板里你的规则显示为“已禁用”，但点开发现它的 specificity 其实不低，只是加载位置靠前
- 本地开发偶尔生效，构建后失效——打包工具打乱了 CSS 加载顺序
用更高特异性选择器绕过 !important（推荐）
比硬刚 !important 更可靠的方式，是让选择器本身权重就压过 Bootstrap 原始规则。Bootstrap 常用 .btn.btn-primary（权重 0,2,0），你可以：
- 加标签前缀：
button.btn.btn-primary（0,2,1） - 加容器 class：
.my-form .btn.btn-primary（0,3,0） - 加属性选择器：
button[data-role="submit"].btn.btn-primary（0,3,1）
注意：input.form-control 这种写法在 Bootstrap 5+ 中容易漏掉 select 和 textarea，统一用 .my-form .form-control 更稳妥。
用 CSS 变量覆盖（最干净，Bootstrap 5.3+ 官方支持）
Bootstrap 5.3+ 的 .btn、.alert、.tooltip 等组件已全面转向 CSS 自定义变量驱动。直接覆盖变量，比写十行 !important 更可控：
:root {
--bs-btn-bg: #3498db;
--bs-btn-hover-bg: #2980b9;
--bs-btn-border-color: #2980b9;
--bs-btn-color: #2c3e50;
--bs-btn-hover-color: #fff;
}
关键点：
- 变量必须注入在 Bootstrap 样式 之后，否则会被重置；验证方式：把
<style>放在</body>前，或确认<link rel="stylesheet">顺序 - 不能只改
--bs-primary就完事——.btn-primary还依赖--bs-primary-rgb，否则文字对比度可能不达标 - 对
.close::before这类伪元素，仍需显式重写 +!important（因为 Bootstrap 对它也用了!important）
哪些地方绝对别乱加 !important
!important 是紧急兜底，不是常规手段。以下场景加了会埋雷：
-
.btn.btn-lg !important——覆盖整个复合选择器，后续任何针对.btn-lg的调整都失效 - 在
<style>标签里写覆盖规则——它默认插入<head>末尾，天然晚于外部 CSS，但和构建工具、HMR 交互时行为不可控 - 对同一属性反复加
!important——比如color: red !important;→color: blue !important;，后续没人敢动这条链
真正难的不是“怎么覆盖”，而是判断该不该覆盖——多数时候，问题出在加载顺序或伪类遗漏，而不是权重不够。先看 Computed 面板里被划掉的那条规则来自哪、有没有 !important、是否只改了常态漏了 :focus，再动手。
