根本原因是选择器特异性不足或加载顺序错误，需确保自定义CSS在Bootstrap之后引入，并用.btn.btn-primary:hover等复合选择器覆盖；同时须成套处理hover、focus、active、disabled等五种状态样式。
为什么 .btn:hover 写了却没反应
常见现象是加了 .btn:hover { background: #ff6b6b; }，但悬停时颜色完全不变。根本原因不是代码写错，而是 Bootstrap 的 CSS 加载顺序或选择器特异性更高——比如它用的是 .btn.btn-primary:hover 这类复合选择器，而你只写了 .btn:hover，权重不够，被覆盖。
实操建议：
- 确保自定义 CSS 文件在 Bootstrap CSS 之后引入（
<link>标签顺序不能颠倒） - 别偷懒只写
.btn:hover，复制 Bootstrap 原始结构：比如改主按钮就写.btn.btn-primary:hover，改 outline 就写.btn.btn-outline-secondary:hover - Bootstrap 5.3+ 引入了
:where()，部分规则权重为 0，此时.btn:hover反而容易生效；但老版本必须靠提升特异性 - 用浏览器开发者工具检查 computed styles，看哪条
background-color被划掉、被谁覆盖
Focus 样式不是 :active，别配错状态
很多人以为点击按钮时的蓝边阴影来自 :active，其实 Bootstrap 的“激活态视觉反馈”主要靠 :focus 或 :focus-visible 实现——尤其在表单连续操作中，按钮点击后仍保有焦点，你看到的就是 focus 样式。
实操建议：
- 修改焦点环别只动
outline，它不支持圆角、难对齐；优先用box-shadow，例如：.btn:focus { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); } -
:focus和:hover可能同时生效（比如鼠标移入后点击不松手），这时要确认两者颜色是否冲突；必要时加.btn:hover:focus单独控制叠加态 - 深色模式下，
rgba(13, 110, 253, 0.25)在暗背景上可能太淡，需提高 alpha 值或换色 - 禁用
autofocus或 tabindex 不当可能导致 focus 样式无法触发，先检查按钮能否通过 Tab 键获得焦点
Hover 和 Focus 必须成套覆盖，漏一个就割裂
只改 .btn:hover 而不碰 .btn:focus，会导致鼠标悬停和键盘聚焦样式不一致；只改常态背景却不调 .btn:disabled，禁用按钮文字就会糊在背景里看不清。
实操建议：
- 至少同步处理五种状态：
.btn（常态）、.btn:hover、.btn:focus、.btn:active、.btn:disabled - 颜色三属性必须联动：每个状态都要明确设
background-color、border-color、color，别只动其中一个 - 圆角、阴影、过渡动画也要统一：
transition: background-color 0.15s, border-color 0.15s, color 0.15s;写在常态规则里，不是 hover 里 - 如果用了 Sass，直接调
button-variant()mixin，它会自动产出整套状态链，比手写安全得多
Dropdown-toggle 按钮要单独豁免 Hover
给所有按钮加统一悬停色时，下拉触发按钮（.dropdown-toggle）往往需要保留原生行为——比如悬停展开菜单。若用 .btn:not(.dropdown-toggle):hover，虽语义正确，但因 :not() 提升了选择器特异性，反而会压过 Bootstrap 自己的 .btn:active，导致点击时还显示悬停色，掩盖了激活反馈。
实操建议：
- 别用
:not()，改用:where()降权：:where(.btn):not(.dropdown-toggle):hover—— 它权重为 0，不会干扰原生状态 - 更稳妥的做法是显式排除：
.btn.btn-primary:not(.dropdown-toggle):hover+.btn.btn-outline-success:not(.dropdown-toggle):hover，逐类写，不贪简 - 如果项目已用 CSS 自定义属性（如
--bs-btn-bg），可在:root中统一设值，再用.dropdown-toggle单独重置，逻辑更清晰 - 务必在真实点击场景下验证：按住鼠标不放 → 看是否切换为
:active样式，松开后是否恢复常态，而不是卡在 hover 色
:focus 和 :active 的边界情形——比如键盘操作、触屏点击、快速连点，这些地方最容易露馅。 
