直接加!important常失败，因Bootstrap 5.3+在:focus-visible等关键状态大量使用!important，需连同伪类、衍生属性一并重写，或改用更高特异性选择器、CSS变量覆盖。
为什么直接加 !important 常常失败
Bootstrap 5.3+ 在关键状态（如 :focus-visible、.btn:disabled）中大量使用了 !important，你写一条 background-color: red !important;，它可能对应着三条带 !important 的规则：背景、边框、阴影。浏览器按“声明顺序 + 权重”裁决，不是谁喊得响谁赢。
常见错误现象包括：DevTools 里你的样式被划掉，但来源显示是 bootstrap.min.css；或者只改了正常态，:hover 或 :disabled 下又回退成默认色。
- 不要单独覆盖单个属性——必须连同伪类、状态、相关衍生属性（如
box-shadow、outline、border-color）一并重写 - 检查
Computed面板里被划掉的那条规则，点开看它的 specificity 和是否带!important - 避免在自定义 CSS 里对同一属性反复加
!important：这会让后续升级或协作时没人敢动这条规则
用更高 specificity 的选择器绕过 !important
比硬刚 !important 更可靠的方式，是让选择器权重本身就压过 Bootstrap 的原始规则。Bootstrap 常用 .btn.btn-primary（权重 0,2,0），你可以用：
-
button.btn.btn-primary（标签 + 两个类 → 0,2,1） -
.my-form .btn.btn-primary（容器 class + 两个类 → 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 变量替代 !important 覆盖 Bootstrap 5.3+
Bootstrap 5.3+ 大量组件（.tooltip、.btn、.alert）已改用 CSS 自定义变量驱动样式，比如 --bs-tooltip-bg、--bs-primary。直接覆盖变量，比写十行 !important 更干净：
code:.my-tooltip {
--bs-tooltip-bg: #2d3748;
--bs-tooltip-color: #e2e8f0;
}
关键点：
- 变量必须作用于目标元素或其祖先（如
.my-tooltip或.my-tooltip .tooltip-inner） - 不能只改
--bs-primary就完事——.btn-primary还依赖--bs-primary-rgb，否则文字对比度可能不达标 - 变量注入时机必须在 Bootstrap 样式之后，否则会被它重置；可用
<link>顺序或<style>放在</body>前验证
真正要小心的是 JS 动态插入的组件
像 modal、dropdown、tooltip 这些组件，DOM 是 JS 运行时插入到 document.body 的，完全脱离你写的容器结构。这时再强的选择器（如 .my-page .btn）也匹配不到它们。
解决办法只有两个：
- 用
:where()降权 + 全局重写：例如:where(.modal) { z-index: 2000; }，避免被其他高权重规则压制 - 给 JS 初始化时传
container选项，强制挂载到你可控的 DOM 节点下，比如container: '#my-app'，再配合#my-app .modal写样式
别指望靠加载顺序或 !important 治愈这类问题——根源是作用域断裂，不是优先级不够。
