直接改 .breadcrumb-item + .breadcrumb-item::before 不生效，是因为 Bootstrap 5 默认规则带 !important 且选择器权重高；需用更强选择器（如 .breadcrumb .breadcrumb-item + .breadcrumb-item::before）并加 !important 覆盖，或优先通过 Sass 变量 $breadcrumb-divider 修改。
为什么直接改 .breadcrumb-item + .breadcrumb-item::before 不生效？
Bootstrap 5 默认用伪元素 ::before 在非首个 .breadcrumb-item 前插入斜杠，但它的样式被写在 bootstrap.min.css 的高优先级规则里，且带 !important（比如 content: "/" !important;）。单纯重写 ::before 往往被覆盖，尤其当你没加 !important 或选择器权重不够时。
实操建议：
- 必须用足够强的选择器，比如
.breadcrumb .breadcrumb-item + .breadcrumb-item::before，或直接加!important - 确保你的自定义 CSS 在 Bootstrap CSS 之后加载（
<link>顺序不能错） - 如果用了 Sass，优先在
$breadcrumb-divider变量处修改，一劳永逸
用 CSS 覆盖分隔符内容和样式（纯 CSS 方案）
不改源码、不编译 Sass，也能快速定制：支持换字符、调颜色、改间距、甚至用图标。
示例（把斜杠换成箭头，并微调位置）：
立即学习“前端免费学习笔记（深入）”；
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "→" !important;
color: #0d6efd !important;
padding: 0 0.5rem !important;
font-weight: bold !important;
}
注意点：
-
content必须用!important，否则 Bootstrap 的默认值会赢 - 别漏掉
padding—— 默认斜杠左右有空隙，换字符后可能挤在一起，需手动调 - 若用 SVG 或字体图标（如 Font Awesome），
content可设为"\f054"（需配合对应字体族）
用 Sass 变量提前控制分隔符（推荐给项目长期维护）
如果你的项目已引入 Bootstrap Sass（比如通过 @import "bootstrap/scss/functions"），最干净的方式是覆盖变量。
在导入 Bootstrap 主文件前，重定义：
$breadcrumb-divider: "›"; $breadcrumb-divider-color: #6c757d; $breadcrumb-item-padding-x: 0.75rem; @import "bootstrap/scss/bootstrap";
这样所有生成的 CSS 都基于新值，无需担心伪元素覆盖失败。特别适合需要统一设计语言的中大型项目。
常见误区：
- 在
@import bootstrap之后再赋值变量——无效，Sass 变量只在首次定义时起作用 - 误用
$breadcrumb-separator（这是 Bootstrap 4 的旧变量名，5 已废弃） - 用引号包裹变量值时混用单双引号导致编译报错（Sass 推荐统一用双引号）
响应式分隔符怎么处理？
Bootstrap 5 面包屑本身不提供响应式分隔符切换，但你可以用媒体查询做条件替换，比如小屏下用换行代替斜杠，避免文字折行混乱。
示例（移动端隐藏分隔符，靠间距区分）：
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "/" !important;
}
@media (max-width: 576px) {
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
display: none !important;
}
.breadcrumb .breadcrumb-item:not(:first-child) {
margin-left: 1rem !important;
}
}
关键提醒：
- 移动端隐藏分隔符后，必须补上视觉间距（如
margin-left），否则项与项会粘连 - 不要仅靠
visibility: hidden—— 它仍占空间，可能影响对齐 - 如果用了 SVG 分隔符，响应式切换时建议用
background-image替代content，更易控制尺寸
!important 的粒度——少一个就白调；用 Sass 的话，变量声明位置错一次，整个构建就回退到默认斜杠。 
