改.nav-link.active颜色不生效的根源是:visited伪类干扰、选择器权重不足及css变量未同步覆盖；需用.nav-item.active .nav-link等连写选择器，配合--bs-navbar-active-color变量和wcag对比度校验。
直接改 .nav-link.active 的颜色往往不生效，真正卡住的是 :visited 伪类、选择器权重不足、以及深色/浅色主题下 CSS 变量未同步覆盖——这三者叠加，会让文字在白底上发灰、在黑底上几乎看不见。
为什么改了 color 还是看不清？
不是颜色值写错了，而是浏览器强制对已访问链接应用默认紫色（#551a8b 或类似），且 Bootstrap 的 .navbar-light 和 .navbar-dark 会注入 --bs-navbar-active-color 变量，优先级高于普通 color 声明。更麻烦的是：若背景是 #fff，而你设的 color: #999，对比度仅约 2.3:1，远低于 WCAG 要求的 4.5:1。
- 用浏览器 DevTools 检查 computed 面板，确认最终生效的 color 是否来自
a:visited或--bs-navbar-active-color - 别只测未点击状态；必须点开再返回，验证
:visited下是否变紫/变灰 - 深色导航栏（
.navbar-dark）里，若没显式覆盖--bs-navbar-active-color，它可能继承自--bs-dark主题变量，导致文字发青或过淡
.nav-item.active .nav-link 必须连写，不能只写 .active
Bootstrap 5 的 DOM 结构中，.active 类加在 .nav-item 上，而文字样式由子元素 .nav-link 控制。单独写 .active { color: #16a34a; } 根本选不到文本节点。
- 正确写法：
.nav-item.active .nav-link、.nav-item.active .nav-link:visited、.nav-item.active .nav-link:focus - 若用
.navbar-dark，前缀不能少：.navbar-dark .nav-item.active .nav-link - 移动端键盘焦点不可见？补上
:focus，否则无障碍用户无法感知当前激活项
用 CSS 变量统一控制比硬写颜色更稳
Bootstrap 5.2+ 支持 --bs-navbar-active-color，改一处，所有 .nav-link.active 自动响应，包括主题切换场景。但注意：它只影响 Bootstrap 组件内链接，不影响手写的 <a></a> 标签。
- 全局生效写法（放在 Bootstrap CSS 之后）：
:root { --bs-navbar-active-color: #16a34a; } - 若同时要改普通链接颜色，额外加：
a:link, a:visited { color: var(--bs-navbar-active-color); } - 旧版本（5.0–5.1）不支持该变量，退回选择器方案，并务必加
!important - 深色模式下变量未生效？检查是否启用了
$enable-dark-mode: true编译选项，或手动为[data-bs-theme="dark"]设置变量
对比度不够时，别只调颜色，先看背景
很多“颜色太淡”的问题，根源不在文字色，而在背景太亮或太暗。比如 bg-white 配 #666 对比度仅 4.3:1，差一点就不达标；而 bg-light（#f8f9fa）配 #495057 就有 7.2:1。
- WCAG 推荐白底文字用
#333（对比度 12:1）或至少#444（9.5:1） - 黑底导航（
.bg-dark）慎用#adb5bd这类浅灰，改用#e9ecef或更高亮度值 - 用 WebAIM Contrast Checker 实时测，别凭肉眼判断——尤其要测
:visited状态下的实际组合
最常被忽略的一点：激活态不是静态的。路由切换后 JS 没加 .active，或者 Vue Router 注入的是 .router-link-exact-active，你却在覆盖 .active，那样式永远不生效。先确认真实 class 名，再动手写 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
