Bootstrap 4.5+ 可直接用 CSS 变量 --bs-breadcrumb-divider 修改分隔符，如 style="--bs-breadcrumb-divider: '›';"，支持任意字符或空字符串；旧版需覆盖 .breadcrumb > li + li:before { content: "›" !important; }；必须用 结构并添加 aria-current="page" 保障语义与无障碍。
怎么用 CSS 变量直接改分隔符（Bootstrap 4.5+）
bootstrap 4.5 起支持 --bs-breadcrumb-divider 这个 css 自定义属性，是改斜杠最干净的方式——不用动伪元素、不碰权重、不污染全局样式。
- 在
<ol class="breadcrumb"></ol>上加内联 style：style="--bs-breadcrumb-divider: '>';"，注意单引号必须包住符号，否则>会被 HTML 解析器截断 - 支持任意字符：
style="--bs-breadcrumb-divider: '•';、style="--bs-breadcrumb-divider: '›';（Unicode 箭头更美观） - 想彻底去掉分隔符？写成
style="--bs-breadcrumb-divider: '';"，空字符串也合法，会清掉伪元素的content
旧版 Bootstrap（4.3 或更低）只能覆盖伪元素
低于 4.5 的版本压根不认识 --bs-breadcrumb-divider，必须手动重写 .breadcrumb > li + li:before 的 content 值，而且极易被原始 CSS 覆盖。
- 推荐在页面
<style></style>块里写，加!important保底：.breadcrumb > li + li:before { content: "›" !important; } - 别用
<ul></ul>替代<ol></ol>—— Bootstrap 的分隔符选择器依赖li + li相邻兄弟关系，<ul></ul>结构下伪元素根本不会渲染 - 如果项目用了压缩后的
bootstrap.min.css，且你没控制构建流程，!important几乎是必须的
为什么不能只靠 class="active" 就完事
class="active" 只管视觉降级（灰底、去链接），但语义缺失——它不告诉屏幕阅读器“这就是当前页”，也不帮搜索引擎理解页面层级。
- 必须配
aria-current="page"，这是 WAI-ARIA 标准要求，不是可选项 - 漏掉它，读屏软件可能把当前项读成普通链接，用户无法确认自己在哪一级
- 某些自动化测试工具（如 axe）会直接报
aria-current缺失为中高危问题
常见错误现象与定位线索
分隔符没出现？或者改了但无效？先看这三处：
-
<nav></nav>包裹和<ol class="breadcrumb"></ol>结构缺一不可；用<div> 或 <code><ul></ul>会导致整个分隔逻辑失效 - 浏览器开发者工具里检查
.breadcrumb > li + li:before是否被覆盖——如果 computed 栏里content显示none或原始"/ "，说明你的样式没生效 - 当前页项写了
class="active"却没加aria-current="page"：视觉可能正常，但语义和无障碍完全断裂
改分隔符本身很简单，但真正容易卡住人的，是结构合法性、语义完整性和版本兼容性这三块拼图没对齐。尤其当团队用着本地老版本 Bootstrap，又混着自定义构建流程时，光改一个
content 值，往往得连带查清 HTML 结构、CSS 权重、ARIA 属性三处才稳。
