最稳妥的面包屑HTML结构是用包裹，每个层级用，当前页用标记；CSS用li:not(:first-child)::before插入" / "分隔符，避免背景图以保障可访问性与响应式适配。
面包屑导航的HTML结构怎么写才干净
用语义化标签，<nav></nav> 包裹 <ol></ol> 是最稳妥的选择——既符合 ARIA 规范，又天然支持屏幕阅读器按列表读取。不要用 <div> 堆砌，也别为了“简洁”改用 <code><ul></ul>（面包屑是顺序路径，不是无序集合）。
每个层级用 <li>，当前页用 <li aria-current="page"> 标记，这是辅助技术识别“终点”的关键信号：
<nav aria-label="面包屑">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/blog">博客</a></li>
<li aria-current="page">如何制作面包屑</li>
</ol>
</nav>
CSS伪元素加分隔符的正确写法
用 ::before 在除第一个 <li> 外的所有项前插入分隔符，是最可控的方式。错误做法是给所有 <li> 加 ::before 再用 :first-child 覆盖隐藏——这在 IE 中容易出错，且逻辑冗余。
content 值推荐用 " / "（空格+斜杠+空格），比纯 "/" 更易读；若需图标，可用 Unicode 字符如 "\203A"（右指向三角），或 SVG Base64（但注意 URL 编码）：
立即学习“前端免费学习笔记（深入）”；
nav ol li:not(:first-child)::before {
content: " / ";
margin: 0 0.5em;
}
nav ol li:first-child::before {
content: none;
}
注意：content 必须是非空字符串，"" 仍会触发伪元素渲染，只是不可见；none 才真正移除。
为什么不能直接用 background-image 模拟分隔符
看似省事，但问题集中爆发在缩放、高对比度模式和打印场景：背景图默认不随文字缩放，高对比度下常被强制隐藏，打印时默认不输出。
更隐蔽的问题是可访问性：屏幕阅读器不会读取 background-image，而 content 插入的文本（哪怕只是符号）在部分模式下仍可能被朗读，语义更完整。
如果坚持用背景图（比如要显示箭头图标），必须额外加 aria-hidden="true" 并确保有替代文本路径，反而更重。
响应式断点里分隔符要不要隐藏
小屏下留空格+斜杠会挤占宝贵横向空间，建议在 max-width: 480px 时改用更紧凑的 "›"（U+203A）或直接去掉空格："›"，而不是删掉整个 ::before。
删除分隔符本身会破坏视觉层次，用户难以分辨层级边界。真要精简，优先压缩文字（如“首页”→“?”，“博客”→“✍️”），而非砍掉结构线索：
@media (max-width: 480px) {
nav ol li:not(:first-child)::before {
content: "›";
margin: 0 0.25em;
}
}
伪元素的 content 是唯一能兼顾语义、样式控制和轻量级的分隔方案，但它的前提是 HTML 结构必须正确——否则再细的 CSS 也救不回语义断裂。
