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></style>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
