Bootstrap 5 中通过 --bs-breadcrumb-divider 变量修改分隔符最稳妥，需在 :root 或内联样式中设为带双引号的字符串（如 "›"），Unicode 需转义，SVG 需用 data URL；同时须用 aria-current="page" 替代 class="active" 实现高亮。
直接改 CSS 变量比覆盖选择器更稳，Bootstrap 5 的分隔符、颜色、间距全由 --bs-breadcrumb-divider 等变量控制，硬写 .breadcrumb-item + .breadcrumb-item::before 容易失效或冲突。
怎么用 CSS 变量改分隔符（比如换成 > 或 ›）
Bootstrap 5 把分隔符逻辑完全交给 --bs-breadcrumb-divider，值必须是带英文双引号的字符串：
- 内联设置最简单：
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';"> - 全局统一写法：
:root { --bs-breadcrumb-divider: "›"; }（注意不是单引号，也不是 HTML 实体>） - Unicode 箭头要转义，比如
→写成"\2192"，否则可能显示为空格或方块 - 别在旧版 Bootstrap 4.5 及以下用这个变量——它不识别，会直接忽略
为什么加了 active 类，当前项还是没高亮
根本原因不是样式没覆盖，而是结构语义错了。Bootstrap 5 不再认 class="active" 作为高亮触发条件：
- 末项必须用
aria-current="page"，不是class="active"（后者已废弃） - 容器必须是
<ol class="breadcrumb">，不能是<ul>或<div> - 外层必须包
<nav aria-label="breadcrumb">，否则屏幕阅读器无法识别上下文 - 当前页
<li>里不能有链接，否则aria-current="page"失效
改颜色/间距时该动哪些变量
优先改变量，而不是暴力覆盖类名。这些变量在 Bootstrap 5 中全部生效：
-
--bs-breadcrumb-color：普通文字色 -
--bs-breadcrumb-active-color：当前项文字色（对应aria-current="page"） -
--bs-breadcrumb-divider-color：分隔符颜色 -
--bs-breadcrumb-item-padding-x：项之间横向间距（默认0.5rem） -
--bs-breadcrumb-padding-y：整体上下内边距
如果用了 Sass，直接在变量文件里重定义它们，编译后自动注入，不会污染其他组件。
用 SVG 或图标当分隔符要注意什么
变量值支持字符串或 url()，但 SVG 必须编码为 data URL，不能直接塞 HTML 标签：
- 错误写法：
--bs-breadcrumb-divider: "<svg>...</svg>";（浏览器不解析） - 正确做法：把 SVG 转成 data URL，例如
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg...%3E"); - 图标尺寸需显式控制，推荐设
height: 1em和vertical-align: middle，避免基线错位 - 纯装饰性图标务必加
aria-hidden="true"，否则读屏器可能重复播报“arrow”“chevron”之类
真正容易被忽略的是 RTL（从右向左）布局下的表现：变量驱动的分隔符会自动翻转位置，而手动写的伪元素不会——这点决定了你是否真理解了 Bootstrap 5 的设计意图。
