直接改 .breadcrumb 的 color 不生效，因颜色由 .breadcrumb-item a 和 .breadcrumb-item.active 分别控制；Bootstrap 5 推荐用 --bs-breadcrumb-color 和 --bs-breadcrumb-active-color 变量覆盖，Sass 项目则重定义 $breadcrumb-color 和 $breadcrumb-active-color 变量。
直接改 .breadcrumb 的 color 不生效？先看继承链
bootstrap 面包屑的字体颜色默认由 .breadcrumb-item a 和 .breadcrumb-item.active 分别控制，不是单纯改 .breadcrumb 容器就能覆盖的。因为 a 标签自带 color: inherit 或主题色，且 .active 有更高优先级的样式声明。
常见错误现象：在 CSS 里写 .breadcrumb { color: #666; }，结果链接文字还是蓝色，当前项还是深灰。
- 必须针对
.breadcrumb-item a覆盖链接色 - 必须单独处理
.breadcrumb-item.active（它不走a规则） - 如果用了 Bootstrap 5+，还要注意
--bs-breadcrumb-divider是 CSS 变量，不影响文字色但容易误调
Bootstrap 5 中用 CSS 变量最省事
Bootstrap 5 开始大量使用 CSS 自定义属性，.breadcrumb 直接响应 --bs-breadcrumb-color 和 --bs-breadcrumb-active-color。改这两个变量，全链路自动同步。
:root {
--bs-breadcrumb-color: #555;
--bs-breadcrumb-active-color: #222;
}
这个方式不用加 !important，也不用担心选择器权重，只要确保你的 CSS 在 Bootstrap 主样式之后加载即可。但如果项目里用了 Sass，更推荐下一种方式。
Sass 项目里改 $breadcrumb-color 和 $breadcrumb-active-color
如果你是通过 Sass 引入 Bootstrap（比如 @import "bootstrap/scss/breadcrumb"），直接在引入前重定义变量最干净：
$breadcrumb-color: #4a5568; $breadcrumb-active-color: #1a202c; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/breadcrumb";
注意顺序：变量必须在 @import "bootstrap/scss/variables" 之前重写，否则会被默认值覆盖。漏掉这一步，改了也白改。
-
$breadcrumb-divider-color控制分隔符（如/）颜色，别和文字色混淆 - 如果只改局部面包屑，用带命名空间的选择器（如
.my-page .breadcrumb）再覆盖变量值 - 编译后生成的 CSS 会自然应用新色值，无运行时开销
用 !important 强行覆盖？真遇到 inline-style 或第三方插件才考虑
极少数情况（比如 CMS 输出了内联 style、或某 UI 插件劫持了 class），CSS 变量或 Sass 变量都不起作用，这时才退到选择器硬覆盖：
.breadcrumb-item a,
.breadcrumb-item a:hover {
color: #3182ce !important;
}
.breadcrumb-item.active {
color: #1a202c !important;
}
这不是常规推荐路径。滥用 !important 会让后续维护变脆弱，尤其当团队多人协作或升级 Bootstrap 版本时，样式冲突会突然冒出来。
真正容易被忽略的是：面包屑中图标（比如 Font Awesome 的 <i class="fas fa-home">）的颜色不会随文字色自动变化，得额外加 .breadcrumb-item i { color: inherit; } —— 这个细节，调试时经常卡几分钟。
