应优先使用--bs-breadcrumb-divider css变量覆盖，默认值为"/"，需在:root或.breadcrumb上设置带英文双引号的字符串（如"›"），且自定义css必须加载在bootstrap之后。
如何用CSS覆盖Bootstrap面包屑的默认分隔符
Bootstrap面包屑（.breadcrumb）里的分隔符是通过伪元素 ::before 在每个 .breadcrumb-item + .breadcrumb-item 兄弟节点前插入的，内容默认为 /（v5.3+ 用的是 CSS 变量 --bs-breadcrumb-divider）。直接改 content 或颜色必须精准命中这个生成规则，否则无效。
关键点：不能只写 .breadcrumb-item::before，得带上兄弟选择器或变量重定义，否则会被 Bootstrap 的高优先级规则压住。
Bootstrap 5.3+ 推荐：重设 CSS 变量
v5.3 起官方支持用 CSS 自定义属性控制分隔符，这是最干净、无副作用的方式。只需在 :root 或 .breadcrumb 上覆盖 --bs-breadcrumb-divider：
:root {
--bs-breadcrumb-divider: "›";
}
<p>/<em> 或仅作用于特定面包屑 </em>/
.breadcrumb.custom-divider {
--bs-breadcrumb-divider: "•";
}</p>
- 值必须是字符串字面量（带引号），比如
"→"、" / "（注意空格也会被渲染） - 支持 Unicode 符号、Emoji（如
"»"、" breadcrumb "），但需考虑字体兼容性 - 不支持 HTML 实体（
>不生效），也不支持 DOM 元素（只能是纯文本）
旧版 Bootstrap 或需要更复杂样式时：用伪元素覆盖
如果用的是 v5.2 或更早版本，或想给分隔符加背景、边框、过渡效果，就得手动覆盖伪元素：
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "»";
color: #0d6efd;
padding: 0 0.5rem;
font-weight: bold;
}
- 必须写全选择器路径，尤其是
.breadcrumb-item + .breadcrumb-item，漏掉+就会选中第一个项前面的伪元素（实际不存在） - 若要移除分隔符，设
content: ""即可，但别用display: none——伪元素不响应该声明 - 如果用了
float布局（老项目），可能需额外清除浮动或设white-space: nowrap防换行
常见失效原因和调试建议
改了 CSS 却没变？大概率是优先级或匹配逻辑出了问题：
- 检查浏览器开发者工具里，
.breadcrumb-item::before是否被划掉——被划掉说明有更高优先级规则（比如 Bootstrap 的!important或更长选择器） - 确认是否在
中引入自定义 CSS 的位置：必须在 Bootstrap CSS 之后加载 - 如果用了 Sass 编译，别在
$breadcrumb-divider变量外另写 CSS，优先改变量再编译 - 移动端下分隔符被截断？可能是父容器
overflow: hidden或text-overflow: ellipsis影响了伪元素
分隔符看着简单，但它的渲染依赖兄弟关系、伪元素继承、CSS 变量作用域三层机制，任一环节错位都会静默失败。调的时候盯着 computed 样式看 content 和 color 的真实来源，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
