只改 --bs-link-hover-color 变量悬停色不变，因其仅作用于 Bootstrap 组件类（如 .nav-link），对原生 <a> 标签无效；需显式声明 a:hover, a:focus { color: var(--bs-link-hover-color); } 并确保深色模式、激活态变量及选择器权重正确。
只改 --bs-link-hover-color 变量为什么悬停色没变
因为该变量仅作用于 Bootstrap 自己的组件类（如 .nav-link、.btn-link），对原生 <a> 标签完全无效——它走的是浏览器默认样式链，不读取这个变量。你看到悬停还是蓝色或紫色，不是变量没生效，而是根本没被应用到目标元素上。
必须同步声明：a:hover, a:focus { color: var(--bs-link-hover-color); }
- 漏掉
a:focus会导致键盘用户 Tab 导航时无视觉反馈，可访问性不达标 - 如果项目用的是 Bootstrap 5.0–5.1，
--bs-link-hover-color还不存在，得退回纯 CSS 覆盖方案 - 深色模式下（
data-bs-theme="dark"），该变量可能未被重设，悬停色在暗背景上发灰或不可读
a:hover 和 a:focus 必须一起写，不能只写 hover
单独写 a:hover { color: #059669; } 看似能改鼠标悬停色，但会忽略焦点状态，破坏键盘导航体验。Bootstrap 5 的可访问性要求明确将两者视为等效交互态，且 :focus 在无障碍测试中是硬性检查项。
正确写法是：
a:hover, a:focus {
color: var(--bs-link-hover-color);
}
- 不要用
a:hover, :focus这种错误写法——:focus缺少元素限定，会匹配所有聚焦元素，污染全局 - 如果用了 Sass 编译，确保
$enable-dark-mode: true已启用，否则深色主题下--bs-link-hover-color不会自动切换 - 某些 CMS 或框架（如 Joomla）会在
<a>外层套<li>，此时需补li a:focus才能覆盖
导航栏激活态（.nav-link.active）颜色不随悬停变量联动
--bs-link-hover-color 对 .nav-link.active 完全无效。这个状态由独立变量 --bs-navbar-active-color 控制，且仅从 Bootstrap 5.2+ 开始支持。
若已设 --bs-link-hover-color 但导航高亮仍是默认蓝，大概率是漏了这句：
:root {
--bs-navbar-active-color: var(--bs-link-hover-color);
}
- 该变量只影响 Bootstrap 组件（
.nav-link、.dropdown-item），手写的<a class="active">仍需额外处理 - 如果激活类加在
<li class="nav-item active">上，选择器必须写全：.nav-item.active .nav-link，不能只靠.nav-link.active - 部分主题或插件会动态插入
style标签覆盖:root，建议用!important做兜底（仅限此变量）
为什么 !important 有时才让悬停色生效
不是变量或规则本身有问题，而是加载顺序或选择器权重被压过。Bootstrap 的原生规则（如 .navbar-light .nav-link:hover）带父级限定，权重天然高于单纯 a:hover。
- 优先检查浏览器开发者工具（F12）中
a:hover规则是否被划掉，以及“Computed”面板里最终生效的 color 值来源 - 临时加
!important可快速验证是否为权重问题，但长期应改用更高权重选择器，例如：body a:hover, body a:focus - 移动端 touch 设备无 hover，这类样式不会触发；若需兼容，得配合
:active做 fallback，否则点击瞬间会闪回原色
--bs-navbar-active-color 是独立开关——它不继承任何其他链接变量，也不响应深色模式自动切换，除非你手动把它和 --bs-link-hover-color 绑定。 
