ol只允许直接包含li等合法子元素，hr非法嵌套会被浏览器移出，导致语义断裂、序号错乱；可用li模拟分割线、相邻div加margin或拆分为多个ol替代。
ol 本身不支持插入 hr 作为子元素，直接写 <ol><li>A</li><hr><li>B</li></ol> 会导致 HTML 结构非法——浏览器会自动把 hr 移出 ol，语义断裂，列表序号还可能错乱。
为什么不能在 ol 里直接放 hr
ol 的合法子元素只有 li（以及可选的 script、template），W3C 明确禁止块级分隔元素混入。常见错误现象包括：
- DevTools 里看到
hr被“踢”到ol外面，甚至跑到上一个兄弟节点之后 - 序号从 1 突然跳成 2，或重复显示（尤其在 Safari 和旧版 Edge 中）
- 用屏幕阅读器朗读时，
hr被读作“分隔线”，但位置已脱离原意，造成逻辑断层
真正可用的三种替代方案
要实现“有序列表中某两项之间加视觉分割”，必须绕过语义冲突，用结构兼容的方式达成视觉效果：
- 用
li自身模拟分割线：<li class="divider" aria-hidden="true"></li>，再通过 CSS 渲染为横线（如border-top: 1px solid #eee;，并清除padding、list-style） - 在两个
li之间插入空div并设margin: 1rem 0;或border-top，确保它不在ol内部，而是作为ol的相邻兄弟元素存在 - 放弃物理分割线，改用
li::after+content在特定项后加符号（如"— — —"），或对li:nth-child(3)单独加margin-bottom: 1.5rem;制造呼吸感
li 里塞 hr 会怎样
有人试过这样写：<li>第一项</li><li><hr>第二项</li>。这看似“把 hr 塞进 li”，但问题更隐蔽：
立即学习“前端免费学习笔记（深入）”；
-
hr成了li的内容，语义变成“第二项的内容是一条分割线”，完全偏离本意 - 如果该
li启用了counter-increment，hr可能干扰计数器重置逻辑 - 在微信小程序
editor或某些富文本组件中，这种嵌套会被过滤或转义，hr直接消失
真正需要分组时，优先拆成多个 ol，中间用 hr 隔开——这才是语义正确、渲染稳定、无障碍友好的做法。
