只改--bs-link-hover-color无效，因其仅作用于bootstrap组件类（如.nav-link、.btn-link），原生标签需手动声明a:hover,a:focus{color:var(--bs-link-hover-color);}，且深色模式下须额外重设[data-bs-theme="dark"]{--bs-link-hover-color:#3b82f6;}。
只改 --bs-link-hover-color 为什么没效果？
因为 --bs-link-hover-color 只作用于 Bootstrap 自己的组件类（比如 .nav-link、.btn-link），对原生 @#@#@#@#@#@#@#@#@#@0 还是浏览器默认行为——它根本没读这个变量。
a:hover 和 a:focus 必须一起写
漏掉 a:focus 会导致键盘用户 Tab 导航时无颜色反馈，违反可访问性要求。而且仅写 a:hover 在深色模式下可能失效，尤其当 data-bs-theme="dark" 被激活时，--bs-link-hover-color 若未在暗色上下文里重设，悬停色会发灰或不可读。
- 必须同步声明：
a:hover, a:focus { color: var(--bs-link-hover-color); } - 确保你的 CSS 加载在 Bootstrap CSS 之后（
<link>标签位置靠后） - 如果用了深色模式，得额外加一段：
[data-bs-theme="dark"] { --bs-link-hover-color: #3b82f6; }
导航栏激活态颜色不跟着变？查 --bs-navbar-active-color
--bs-link-hover-color 管不了 .nav-link.active 的文字色。Bootstrap 5.2+ 引入了独立变量 --bs-navbar-active-color 控制这个状态。补上它，才能让当前页导航高亮和悬停保持一致。
- 写法：
:root { --bs-navbar-active-color: #16a34a; } - 注意：该变量只影响
.nav-link、.dropdown-item等 Bootstrap 组件，手写<a class="active"></a>仍需单独处理 - 若 CMS 自动把
.active加在<li>上（如<li class="nav-item active"><a class="nav-link"></a></li>），选择器得写成.nav-item.active .nav-link
为什么加 !important 才生效？
大概率是 CSS 加载顺序或选择器权重问题。Bootstrap 的 a:hover 规则用的是属性选择器（如 a[href]:hover）或组合选择器（如 .nav-link:hover），优先级并不低。
- 检查 DevTools 中你的规则是否被划掉——有删除线就说明被更高权重规则覆盖
- 避免宽泛写法：
a { color: ... }会覆盖所有伪类，导致:visited失效 - 更稳妥的写法是提高特异性：
body a:hover, body a:focus或article a:hover - 如果项目集成 WordPress 或 Joomla，它们的模板 CSS 可能自带高权重规则，得针对性加前缀（如
.wp-site-blocks a:hover）
style="color: var(--bs-link-color)" 能响应，但写死的 color: #0d6efd 就彻底脱离控制了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
