.nav-link文字颜色变黑失败是因为浏览器默认a:link/a:visited覆盖了.navbar-light的color，需同时重置a伪类、.nav-link及:hover/:active状态，并注意选择器权重与!important使用。
navbar-light 下的 .nav-link 文字颜色为什么还是黑不下去
因为 .navbar-light 本身只设了基础文字色（color: #212529），但 .nav-link 继承自 a 标签，而浏览器默认的 a:link 和 a:visited 会覆盖它——尤其在未显式重置伪类时，点过一次就变紫，再刷新也回不去。
必须同时处理三处：
-
a:link, a:visited—— 控制未点击/已点击状态的原始链接色 -
.nav-link—— 确保导航项不被父级.navbar-light的继承链干扰 -
.nav-link:hover, .nav-link:focus—— 否则悬停时突然跳回蓝色或模糊不清
推荐写法（放在 Bootstrap CSS 之后）：
a:link, a:visited { color: #4e73df; }<br>.navbar-light .nav-link { color: #4e73df !important; }<br>.navbar-light .nav-link:hover { color: #2e59d9 !important; }
用 --bs-navbar-color 变量改是否更干净
可以，但只对 Bootstrap 自己生成的组件生效，比如 .navbar-brand、折叠按钮图标、.navbar-text；.nav-link 是原生 ，它不读这个变量。
所以你写：
:root { --bs-navbar-color: #4e73df; }
确实能让 logo 和折叠按钮变色，但导航链接依然蓝着——除非你额外补上：
.navbar-light .nav-link { color: var(--bs-navbar-color); }
注意：--bs-navbar-color 在 .navbar-dark 下默认是亮色，别在深色导航栏里复用同一套变量值，否则文字可能糊成一片。
.active 类颜色被 hover 覆盖怎么办
典型现象：鼠标移上去，激活项瞬间变蓝，松开又恢复；或者点击后高亮一闪就消失。这是因为 :hover 规则权重高于 .active，且 .nav-link.active 没显式声明 color。
正确做法是把激活态和悬停态拆开控制：
.navbar-light .nav-link.active {<br> color: #2e59d9 !important;<br>}<br>.navbar-light .nav-link:hover:not(.active) {<br> color: #3a6ea5;<br>}
关键点：
- 加
:not(.active)避免悬停时覆盖激活态 - 必须用
!important（Bootstrap 5.2+ 的.nav-link默认带color: inherit，普通选择器压不住） - 如果用了
.navbar-nav > .nav-item > .nav-link这种结构，选择器要匹配实际 DOM 层级，否则规则不命中
移动端折叠菜单弹出后文字还是黑的
折叠菜单（.navbar-collapse）展开后的区域，默认是白底黑字，和 .navbar-light 的浅背景不冲突，但和深色主题或自定义背景放一起就会断裂——尤其当你给导航栏加了 background: #f8f9fa，弹出层却是纯白，边缘发虚。
要统一控制，得单独作用于 .navbar-collapse 内部：
.navbar-light .navbar-collapse .nav-link {<br> color: #4e73df;<br>}<br>.navbar-light .navbar-collapse .nav-link.active {<br> color: #2e59d9 !important;<br>}
容易漏掉的是 .dropdown-item（下拉菜单项），它不属于 .nav-link，需额外处理：
.navbar-light .dropdown-item { color: #4e73df; }<br>.navbar-light .dropdown-item:hover { color: #2e59d9; }
真正麻烦的是：这些样式在 Vue/React 中若用 scoped 或 CSS-in-JS，.navbar-collapse 展开是 JS 动态插入的 DOM，可能脱离当前作用域——这时候得靠 ::v-deep 或全局样式兜底。
