纯css多级面包屑存在三大限制：伪元素无法嵌套导致深层级分隔符失效；ie11对content中中文/特殊符号渲染异常；display: contents使counter-increment失效。需用border-right、unicode符号或html属性替代。
面包屑层级超过3级时::before嵌套失效
纯CSS实现多级面包屑依赖::before和::after伪元素拼接分隔符，但伪元素无法“嵌套”——它只能作用于真实DOM节点。如果HTML结构是单层<nav><ol>
<li>首页</li>
<li>分类</li>
<li>子类</li>
</ol></nav>，那所有<li>都平级，你没法让第3个<li>的::before“感知”前面已有两个层级。
解决办法是放弃“动态生成分隔符”的执念，改用background-image或border-right做视觉分隔，或者接受必须在HTML中显式写出层级关系（比如用data-level属性）。
- 推荐用
border-right：给每个<li>加border-right: 1px solid #ccc，再用:last-child { border-right: none }收尾 - 若坚持用
content，必须为每级写独立选择器，例如li:nth-child(2)::before、li:nth-child(3)::before，不能靠循环逻辑 - 注意
content: " / "会触发元素变成inline，可能破坏原有display: flex布局，建议统一设display: inline-flex或display: inline-block
IE11下content中的中文斜杠显示异常
IE11对content属性中非ASCII字符（如中文全角斜杠“／”或箭头“→”）渲染不稳定，有时空白、有时错位，尤其配合font-family切换时更明显。
这不是编码问题，而是IE对伪元素文本排版的底层缺陷。最稳方案是回避文字分隔符，改用SVG图标或Unicode符号。
立即学习“前端免费学习笔记（深入）”；
- 用
content: " \203A "（Unicode右指针）比用“→”兼容性更好 - 避免
content: " / "，改用content: "/"（英文半角），并确保父容器font-family不强制使用无衬线中文字体（如"Microsoft YaHei"） - 若必须用图标，可内联SVG：
content: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M2 2l4 4-4 4"></path></svg>");，但注意IE11只支持base64编码，需转义
counter-increment在display: contents元素上不生效
有人想用CSS计数器自动编号面包屑（“1. 首页 > 2. 分类 > 3. 子类”），于是给<ol></ol>设counter-reset: crumb，<li>设counter-increment: crumb。但如果<li>被设了display: contents（为了不破坏Flex布局），计数器就停摆——因为display: contents会让元素不参与渲染树，counter-increment失去绑定目标。
这是规范行为，不是bug。只要元素不出现在渲染树里，它就无法触发计数器更新。
- 不要对
display: contents的<li>设counter-increment；要么去掉display: contents，要么把计数逻辑移到其父元素（如<ol></ol>）上，用counter()配合nth-child模拟 - 简单替代：直接在HTML里写
data-index="1"，CSS用content: attr(data-index) ". " - 注意
counter()函数不支持表达式，counter(crumb, lower-roman)可以，但counter(crumb + 1)不行
响应式折叠时visibility: hidden导致焦点丢失
移动端常把深层级面包屑收起，只留首尾两项，中间用“…”代替。有人用li:not(:first-child):not(:last-child) { visibility: hidden }隐藏中间项，结果键盘用户Tab到面包屑时，焦点会卡在不可见元素上，体验断裂。
visibility: hidden只是隐藏，元素仍占位、仍可聚焦；而面包屑是导航组件，必须保障可访问性。
- 改用
display: none，但它会破坏flex间隙计算，需配合margin重调间距 - 更稳妥：用
clip-path: inset(100%)隐藏+position: absolute移出流，同时加aria-hidden="true"告诉读屏器跳过 - 若用JS控制折叠，务必同步操作
tabindex="-1"，否则隐藏后仍能Tab进去
