ol标签本身能自动生成有序编号并保障语义与无障碍，无需JS或CSS模拟；编号消失主因是li非ol直接子元素、list-style被设为none未恢复、或li设为flex/grid导致标记隐式禁用。
ol 标签本身就能生成语义正确、无障碍友好的有序步骤，不需要额外包装、JS 计数或 CSS 模拟编号——只要结构合法，浏览器自动渲染数字并告知屏幕阅读器“第 N 项”。
为什么ol没显示编号？先查这三处
90% 的“编号消失”不是样式问题，而是 DOM 结构或解析异常：
-
li不是ol的直接子元素（比如中间插了div或section），浏览器会自动纠错，但语义已损坏 - 全局 CSS 或组件库把
ol或li的list-style设为none，且未显式恢复（list-style: decimal或inherit） -
li被设为display: flex或display: grid—— 这些值会隐式禁用列表标记，必须加list-style: inherit
start 和 type 属性现在还值得用吗？
能不用就不用。它们兼容性有限、不可扩展，且和现代 CSS 方案冲突风险高：
-
type="A"在 Safari 和旧版 Edge 中可能不渲染为大写字母；type="1"是唯一稳定值 -
start="5"只对单个ol有效；多个连续ol想“续号”，必须用 CSScounter-reset/counter-increment - 要加前缀（如
"Step 1."）、图标或 SVG，type根本做不到，只能走list-style: none+li::marker
嵌套步骤怎么写才合法？
合法嵌套只有一种写法：li 内直接包 ol 或 ul。任何跳层都会让浏览器重排 DOM：
立即学习“前端免费学习笔记（深入）”；
- 错误：
<ol><div> <li>主项</li> <ol><li>子项</li></ol> </div></ol>→ 子ol会被移出 - 正确：
<ol><li>主项<ol><li>子项</li></ol> </li></ol> - 动态生成时（如 Vue/JSX），漏掉
li闭合或空状态未处理，极易产出非法结构
最常被忽略的一点：列表标签选错，不是样式问题，是语义污染——它会在无障碍测试、SEO 抓取、甚至 querySelectorAll('ol > li') 中持续制造偏差，而且越往后改越疼。
