a:active不生效是因为它仅在点击瞬间触发，与导航高亮无关；真正需要的是手动添加的class="active"及对应选择器a.active。
为什么 a:active 样式不生效，但 a.active 才是你要的
根本原因在于混淆了 CSS 伪类和类选择器：a:active 只在用户鼠标按下链接的瞬间触发，松开就消失，它和“当前页面高亮”完全无关；而导航栏需要的是你手动加在 HTML 上的 class="active"，对应的选择器必须是 a.active 或 .nav-link.active 这类类选择器。
常见错误写法：
li a:active { color: #0d6efd; }
这不会让“首页”链接一直高亮——它只在你点下去那几十毫秒变色。正确写法应明确匹配 class：
li a.active { color: #0d6efd; font-weight: 600; }
- 务必检查你的 CSS 中有没有把
:active误当.active使用 - 如果用了 SCSS/Less，确认编译后生成的 CSS 确实包含
.active相关规则，而不是仅保留了伪类 - 浏览器开发者工具的 Elements 面板里，选中导航链接，看右边 Styles 是否列出了你写的
a.active规则，并且没被划掉（即未被更高优先级样式覆盖）
Bootstrap 的 .active 类被覆盖？查加载顺序和选择器权重
即使你写了 .nav-link.active，样式仍不生效，大概率是 CSS 加载顺序或选择器优先级问题。Bootstrap 的默认样式（如 .nav-link.active）本身优先级不高，很容易被后加载的自定义 CSS 覆盖。
典型错误顺序：
<link rel="stylesheet" href="css/custom.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
这时 custom.css 里哪怕只写一条 .nav-link { color: #333; }，也会因后加载而覆盖 Bootstrap 对 .active 的颜色定义。
- 确保 Bootstrap CSS 在所有自定义 CSS 之前 引入
- 避免用过于宽泛的选择器覆盖，比如不要写
a { color: #333; }，改用更具体的.navbar-nav .nav-link - 如果必须提高权重，可加一层父容器，例如
.navbar .nav-link.active，但优先考虑调整引入顺序
导航项 class="active" 没加对位置？检查 HTML 结构层级
Bootstrap 5 的导航组件对 DOM 结构敏感。.active 必须加在正确的元素上，否则样式规则压根不匹配。
标准 Navbar 写法中，激活状态应加在 <a></a> 标签上（不是 <li>）：
- 加在
<li>上（<li class="active"><a class="nav-link"></a></li>）会导致 Bootstrap 的.nav-link.active规则失效，因为该规则不匹配 - 若使用下拉菜单，
.active应加在下拉项的<a></a>上，而非触发按钮 - 注意
aria-current="page"是辅助功能建议，不影响样式，但加上更规范
JS 初始化失败导致动态切换失效？验证 bootstrap.bundle.min.js 是否加载
如果你依赖 JavaScript 动态设置 .active（比如单页应用路由切换时），那 bootstrap.bundle.min.js 必须成功加载并执行。它不负责添加 .active，但很多前端框架或自定义脚本会基于它的事件（如 shown.bs.tab）来更新状态。
- 打开浏览器 Network 面板，筛选
bootstrap.bundle.min.js，确认状态码是200，响应内容以/*! Bootstrap v5.3.3 */开头 - 不要只引入
bootstrap.min.js：下拉、弹出层等组件依赖 Popper 和内部模块，必须用bundle版本 - 检查控制台是否有
ReferenceError: bootstrap is not defined，说明 JS 未加载或执行早于 bundle -
<script></script>标签要放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
