bootstrap 5 默认分隔符是 base64 编码的 svg 图标（非文字），因原生样式用 background-image 且带 !important，直接改 content 不生效；需清除 background 并用 content 插入文本或图标，同时加 !important 和 padding。
Bootstrap 5 默认分隔符是啥，为什么改不了
Bootstrap 5 的面包屑（Breadcrumb）默认用 > 作分隔符，它不是文字，而是通过伪元素 ::before 插入的 SVG 图标（data:image/svg+xml base64 编码）。直接写 content: "/" 不生效，是因为原生样式带 !important 且优先级高。
常见错误：在自定义 CSS 里只写 .breadcrumb-item + .breadcrumb-item::before { content: "/"; } —— 没用，会被 Bootstrap 的 base64 SVG 覆盖。
- 必须覆盖
background-image（因为 SVG 是背景图）或重置content并禁用背景 - Bootstrap 5.3+ 使用
background-image: url("data:image/svg...")，所以清空背景比覆盖更稳妥 - 要加
!important或提高选择器权重（比如加.breadcrumb前缀）
用 CSS 替换为斜杠 / 或其他字符
最简方案是清除默认背景，再用 content 插入纯文本分隔符：
.breadcrumb-item + .breadcrumb-item::before {
background: none !important;
content: "/" !important;
padding: 0 0.5rem;
}
注意点：
-
padding得手动加，否则斜杠会贴着文字；原生 SVG 自带间距，文本没有 - 如果项目用了 RTL（右向左）语言，记得加
direction: ltr防止斜杠翻转 - 不要只写
.breadcrumb-item::before—— 这会影响第一个项，必须限定为+ .breadcrumb-item（即“前一个 + 当前”）
替换成自定义图标（如 Font Awesome）
想用图标代替文本？得禁用原背景，再用字体图标：
.breadcrumb-item + .breadcrumb-item::before {
background: none !important;
content: "\f054" !important; /* FA arrow-right */
font-family: "Font Awesome 6 Free" !important;
font-weight: 600 !important;
padding: 0 0.5rem;
}
关键细节：
- 确保字体已加载，且
font-family名与实际引入一致（FA 6 是"Font Awesome 6 Free"，FA 5 是"Font Awesome 5 Free"） -
font-weight必须匹配图标字体要求（FA solid 是900，free 版是600） - 别漏掉
!important，否则图标字体会被 Bootstrap 的font-weight: normal覆盖
兼容性与维护提醒
Bootstrap 从 v4 升到 v5 后，分隔符实现从 content: ">" 改为 SVG 背景图，所以旧写法全失效。如果你用的是 Bootstrap 4，直接改 content 就行；但 v5/v5.3+ 必须清背景。
容易被忽略的点：
- 第三方主题（如 Bootswatch）可能重写了
::before，需检查其 CSS 是否带更高权重 - 如果面包屑用了
.breadcrumb-item.active，它的::before不触发（因为没后继项），不用额外处理 - 用
rem或em控制padding，避免响应式断点下分隔符挤在一起
改完记得在深色模式、缩放 125%、屏幕阅读器环境下快速过一遍——分隔符只是小元素，但错位或不可读会直接影响导航理解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
