面包屑导航

面包屑导航通过提供返回起始页面的 面包屑 轨迹，帮助用户了解他们在网站中的位置。这些项目通常以内联方式显示，每个项目之间用分隔符隔开，表示各个页面之间的层次结构。

Links displayed inline with separators

要求

通过以内联方式显示链接，并用分隔符隔开各个项目，来显示网站的层次结构，表示各个页面之间的层次结构，当前页面显示在最后。

食谱

注意： 上面的示例使用了一个复杂的选择器在每个 li 之前插入内容，除了最后一个 li。这也可以通过使用一个复杂的选择器来实现，该选择器会针对除了第一个之外的所有 li 元素。

css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}

随意选择您喜欢的解决方案。

做出的选择

为了以内联方式显示列表项，我们使用 弹性盒模型布局，从而演示了一行 CSS 如何为我们提供导航。使用 CSS 生成的内容 添加分隔符。您可以将它们更改为您喜欢的任何分隔符。

无障碍问题

我们使用了 aria-label 和 aria-current 属性来帮助辅助技术用户理解这个导航是什么以及当前页面在结构中的位置。有关更多信息，请参阅相关链接。

请注意，上面的示例中使用 content CSS 属性添加的分隔符箭头 → 会暴露给辅助技术（AT），包括屏幕阅读器和盲文显示器。对于更安静的解决方案，请在您的 HTML 中使用一个带有空 alt 属性的装饰性 <img>。设置为 none 或 presentation 的 ARIA role 也会阻止图像暴露给 AT。

或者，通过在替代文本之前添加斜杠 (/) 包含一个空字符串作为替代文本，来使 CSS 生成的内容 静音；例如，content: url("arrow.png") / "";。

如果包含将暴露给 AT 的生成的分隔符，请选择使用 ::after 伪元素选择器而不是 ::before 来创建生成的内容，这样分隔符内容将在 HTML 内容之后宣布，而不是之前。

另请参阅