Bootstrap 5 面包屑当前项未高亮，根本原因是末项缺失 aria-current="page" 或内部误含 标签；必须同时满足：文本、外层为 、且无链接包裹，否则样式规则 .breadcrumb-item[aria-current="page"] 不匹配。
为什么 aria-current="page" 没触发高亮样式
Bootstrap 5 不再靠 class="active" 触发当前项样式，而是依赖 aria-current="page" 属性。如果最后一项只加了 class="breadcrumb-item active" 却没加 aria-current="page"，.breadcrumb-item[aria-current="page"] 这条规则就完全不匹配，颜色自然不会变。
常见错误写法：
-
—— 缺aria-current -
—— 当前页不该有链接
正确结构必须同时满足：
- 末项是
- 该项内部不能包含
标签 - 外层容器是
，不是--bs-breadcrumb-active-color变量没生效的三个原因Bootstrap 5.3+ 推荐用 CSS 变量统一控制，但变量不生效往往卡在加载顺序或作用域上：
- 自定义 CSS（含
:root声明）必须在 Bootstrap 的 CSS 文件 之后 加载，否则变量被重置为默认值 -
--bs-breadcrumb-active-color只在:root或.breadcrumb元素上声明才有效；写成.my-theme { --bs-breadcrumb-active-color: #212529; }是无效的 - 检查浏览器开发者工具的 Computed 面板，确认该变量是否出现在
.breadcrumb-item[aria-current="page"]的计算样式中；若未出现，说明变量未继承或被覆盖
颜色被其他规则强行覆盖了
即使结构和变量都对，
color属性仍可能被更高优先级的选择器压住。最典型的是：- 全局设置了
a { color: #0d6efd; }，而面包屑链接也命中这个规则，且权重高于.breadcrumb-item[aria-current="page"] - 项目用了深色主题（
data-bs-theme="dark"），但没同步重定义--bs-breadcrumb-active-color，导致它仍取浅色模式下的值，在暗背景下对比度极低 - 某些 UI 库或重置 CSS 强制设了
.breadcrumb-item a, .breadcrumb-item span { color: inherit !important; }，直接吞掉你的颜色设置
验证方式：在 DevTools 中选中末项元素，看
color行是否被划掉；如果是，点开右侧的“Rules”面板，逐条排查哪条规则覆盖了它。当前项文字其实是链接，但你没意识到
这时
aria-current="page"在上，但实际渲染的文字是的内容，而默认继承.breadcrumb > li > a的颜色（如#0d6efd），不会自动读取.breadcrumb-item[aria-current="page"]的 color。解决办法只有两个：
- 删掉
，让文字直接作为的文本节点 - 或者显式给当前项内的链接加样式：
.breadcrumb-item[aria-current="page"] a { color: var(--bs-breadcrumb-active-color) !important; }
真正容易被忽略的是：当前项是否真的“无链接”——很多团队在迁移旧代码时会漏掉这层语义校验，只盯着 class 和 aria 属性，却没检查 DOM 结构本身。
- 自定义 CSS（含
