BEM命名CSS面包屑导航路径与分隔符样式

<li class="breadcrumb__item breadcrumb__item--current">详情页</li>

不要试图用 .breadcrumb__link--disabled 模拟当前页——disabled 是表单控件状态，不适用于导航语义。

分隔符必须用 li:not(:last-child)::before，不能靠 content: "/\00a0" 硬塞

content: "/\00a0" 里的 \00a0 是不间断空格，它属于文本内容，会被复制粘贴、被屏幕阅读器朗读为“斜杠 空格”，干扰辅助访问。而且一旦响应式缩放，这个空格的宽度不受控。

真正可控的做法是：

• 用 li:not(:last-child)::before 插入纯符号，如 content: ">"
• 把间距交给 li 的 margin-right 控制，而非塞在 ::before 里
• 若需图标替代符号，用 content: url(arrow.svg)，避免 base64 冗余或字体图标加载失败白屏

错误写法：li::before { content: " > " }（前后空格不可控，末尾多一个）

正确写法：li:not(:last-child)::before { content: ">"; margin-right: 0.5rem; }

响应式下保留首尾+当前页，其他层级可折叠但不能丢语义

小屏设备上，面包屑常缩为 “首页 > … > 当前页”，但省略的中间项仍需保留在 DOM 中，仅用 display: none 隐藏。否则：

• 屏幕阅读器读不出完整路径，只剩“首页 当前页”，丢失上下文
• SEO 爬虫无法解析层级关系，影响结构化数据收录
• JavaScript 动态展开时，得重新生成 HTML，破坏 SSR 一致性

推荐做法是给中间项加 breadcrumb__item--collapsed，CSS 中控制显示/隐藏，同时保持

的完整顺序不变。别为了“看起来简洁”而删 DOM 节点。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。