必须用<ol>而非<div>+flex，因其提供语义化导航结构，支持屏幕阅读器读出层级顺序，并天然兼容first:hidden、last:font-medium等Tailwind伪类；分隔符须为独立<li>并加sm:hidden flex-shrink-0，避免伪元素导致焦点错乱。
直接用 <ol> + flex + sm:hidden 分隔符就能跑通绝大多数场景，不用 JS、不依赖第三方组件库，语义正确且屏幕阅读器友好。
为什么必须用 <ol> 而不是 <div> + flex
用 <div> 模拟列表会丢失语义层级，键盘焦点无法按路径顺序跳转，SR（屏幕阅读器）读不出“第 1 项 / 第 2 项 / 当前页”这样的导航逻辑。而 <ol> 天然支持 first:*、last:*、nth-child 等 Tailwind 伪类，比如：
-
first:hidden可隐藏第一个分隔符（避免开头出现多余/） -
last:font-medium可高亮当前页，无需额外 class -
list-none必须加在<ol>上，否则默认数字序号和手动/会叠加显示
分隔符怎么写才真正响应式且可访问
别用 ::before 或 ::after 插入 / —— 这会让小屏隐藏后，焦点顺序错乱，且无法被键盘跳过。正确做法是把每个分隔符写成独立的 <li>：
<ol class="flex flex-wrap items-center gap-1 sm:gap-2"> <li><a href="/" class="text-blue-600 hover:underline">首页</a></li> <li class="sm:hidden text-gray-400 flex-shrink-0">/</li> <li><a href="/docs" class="text-blue-600 hover:underline">文档</a></li> <li class="sm:hidden text-gray-400 flex-shrink-0">/</li> <li class="font-medium text-gray-900">配置指南</li> </ol>
- 每个分隔符
<li>都要加flex-shrink-0，否则在窄屏下可能被flex-wrap挤到下一行 -
sm:hidden控制桌面端显示、移动端隐藏；若想小屏改用→，可换成max-sm:before:content-['→'] max-sm:pl-1 - 所有分隔符统一用纯文本
/，后续替换为 SVG 图标时只需改内容，不影响布局流
中文路径截断与防折行的关键控制
中文字符无天然空格，truncate 在 flex 容器里容易失效，尤其当父容器未设宽度限制时。解决方案是给中间项（非首尾）加显式约束：
立即学习“前端免费学习笔记（深入）”；
- 中间链接项统一加
max-w-[120px] truncate inline-block，强制单行+省略 - 首项和末项（如首页、当前页）不加
truncate，避免误截关键信息 - 整个
<ol>加flex-wrap，配合gap-1 sm:gap-2控制不同断点间距 - 避免对
<li>设whitespace-nowrap—— 这会导致整行溢出容器，移动端完全不可见
最易忽略的是：所有分隔符 <li> 必须和内容项同级、同父容器，不能嵌套在链接内部，否则语义断裂，且 flex-shrink-0 在某些浏览器中会失效。
