本文详解如何使用 css 选择器（如 :where()）和 css 自定义属性，安全地为除 .dropdown-toggle 外的所有 .btn 元素设置 :hover 样式，同时避免覆盖 bootstrap 原生的 :active、:focus、.disabled 等高优先级状态样式。
本文详解如何使用 css 选择器（如 :where()）和 css 自定义属性，安全地为除 .dropdown-toggle 外的所有 .btn 元素设置 :hover 样式，同时避免覆盖 bootstrap 原生的 :active、:focus、.disabled 等高优先级状态样式。
在基于 Bootstrap 的项目中，常需对按钮悬停行为做统一定制（例如统一禁用悬停变色），但又必须保留下拉按钮（.dropdown-toggle）的默认交互逻辑。若直接使用 .btn:not(.dropdown-toggle):hover，看似语义正确，却极易因选择器特异性（specificity）过高，意外覆盖 Bootstrap 内置的 :active、:focus-visible、.show 或 :disabled 等关键状态样式——导致点击时仍显示悬停色而非激活色，破坏用户预期。
根本原因在于：Bootstrap 按钮的状态样式（如 .btn:active）通常采用低特异性选择器（如 button.btn:active），而开发者自定义的 .btn:not(.dropdown-toggle):hover 特异性更高（含伪类 :not()），CSS 层叠规则会使其在 :hover 与 :active 同时生效时（即点击并保持鼠标按下状态）胜出，从而掩盖了激活态视觉反馈。
✅ 推荐方案一：使用 :where() 降权选择器（现代浏览器兼容，推荐新项目）
:where() 是 CSS 逻辑伪类，其内部选择器不增加特异性（恒为 0），完美解决覆盖问题：
/* ✅ 安全：特异性 = 0，不会压倒 Bootstrap 的 :active/.disabled 等 */
.btn:where(:not(.dropdown-toggle)):hover {
background-color: #f8f9fa; /* 示例：浅灰悬停背景 */
color: #212529;
}该写法等效于“所有 .btn 元素在悬停时应用样式，但若同时拥有 .dropdown-toggle 类则跳过”，且因 :where() 归零特异性，Bootstrap 原生状态样式（如 .btn:active { background-color: #e2e6ea; }）可正常生效。
⚠️ 注意：:where() 目前在 Safari 15.4+、Chrome 105+、Firefox 103+ 中完全支持；若需兼容旧版浏览器（如 IE 或早期 Safari），请改用方案二。
✅ 推荐方案二：覆写 CSS 自定义变量（全浏览器兼容，强烈推荐生产环境）
Bootstrap 5.3+ 全面采用 CSS 变量控制按钮状态样式（如 --bs-btn-hover-bg）。通过仅修改这些变量，即可实现“样式定制”而不触碰选择器权重：
/* ✅ 兼容性最佳：不影响任何状态选择器的优先级 */
.btn:hover {
--bs-btn-hover-color: var(--bs-btn-color);
--bs-btn-hover-bg: var(--bs-btn-bg);
--bs-btn-hover-border-color: var(--bs-btn-border-color);
}此方式让 .btn:hover 仅重置变量值，后续所有状态（如 .btn:active 中 background-color: var(--bs-btn-active-bg)）仍按原始特异性顺序计算，确保点击、聚焦、禁用等状态视觉反馈完整保留。
? 验证技巧：
- 在浏览器开发者工具中检查按钮元素，观察 :hover 状态下 background-color 是否由 var(--bs-btn-hover-bg) 计算得出；
- 手动触发 :active（鼠标按下不松开），确认背景色是否切换为 Bootstrap 定义的激活色；
- 对比 .dropdown-toggle 按钮：其悬停色应保持 Bootstrap 默认（如深蓝），不受上述规则影响。
? 总结：
- 避免使用高特异性组合选择器（如 .btn:not(.dropdown-toggle):hover）直接覆盖样式；
- 优先选用 :where() 降权（现代项目）或 CSS 变量覆写（全兼容方案）；
- 始终以不破坏框架状态优先级为前提，保障交互一致性与可访问性。
