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