ol默认是带编号的语义容器，浏览器强制自动渲染数字编号；失效主因是结构不合规（如li非直接子元素）、css屏蔽（list-style:none）、display属性破坏计数上下文或空ol被忽略。
ol 默认就是带编号的语义容器
浏览器把 <ol></ol> 当作“有序列表”语义元素，只要结构合规、没被样式意外屏蔽，它就会自动渲染数字编号——这不是 CSS 的功劳，也不是 JS 补的，是 HTML 规范强制要求的行为。
常见失效现象包括：编号完全不出现、只显示内容不显示序号、序号错位或中断。根本原因往往不是“怎么让它编号”，而是“什么让它不编号”。
-
<ol></ol>必须包含至少一个<li>作为直接子元素；写成<ol><div><li>...</li></div></ol>就会断掉计数上下文 - 全局或局部 CSS 中写了
ol { list-style: none; }或list-style-type: none;，但没手动补回编号逻辑（比如用counter-increment） -
<ol></ol>被设了display: flex或display: grid，在 Safari 15.4 之前会破坏内置计数器（现代浏览器已修复，但旧版仍存在） - 空
<ol></ol>（不含任何<li>）在 IE 或 XHTML 模式下可能被跳过渲染
为什么写了 type="a" 还是显示 1. 2. 3.
type 属性只有在没被 CSS 覆盖、且结构合法时才生效。它不是“开关”，而是一个可被更高优先级规则覆盖的默认值。
真正压倒 type 的是 CSS 的 list-style-type。只要写了 ol { list-style-type: decimal; }，哪怕 <ol type="a"></ol> 也只会显示 a. b. c. → 不，它会退回到 1. 2. 3.。
-
type只认精确字符串："a"、"A"、"i"、"I"、"1"；写成type="lower-a"或type="a)"全部无效，浏览器静默 fallback 到"1" -
type="a"+start="3"显示的是c.、d.，不是从字母表第 3 个开始“重排”，而是把阿拉伯数字 3 映射为字母 c - 嵌套时，子
<ol></ol>的type和start完全独立，不会继承父级；外层start="10"不会让内层自动从 10 开始
start 属性到底控制什么
start 控制的是“第一个 <li> 显示的数字”，不是“跳过前 N 项”。它参与的是浏览器内部的阿拉伯数字计数逻辑，和 type 是解耦的。
-
start="7"→ 渲染为7.、8.、9.；不是“从第 7 步开始”，而是“第一项显示为 7.” -
start="-2"合法，显示为-2.、-1.、0.；但type="A"下负数无意义，部分浏览器 fallback 为数字或留空 -
start="5.8"或start="abc"会被强制转整或退化为1，无报错但失效 - 动态插入新
<li>时，start不会重算；新增项仍按当前最大编号 +1，不会对齐你期望的“当前最大值”
reversed 和 value 的真实行为边界
reversed 只反转编号方向，不反转 DOM 顺序；value 只覆盖单个 <li> 的显示值，并中断后续自动递增——这两者都容易被高估其能力。
-
<ol reversed></ol>等效于start设为总项数（如 5 项 →start="5"），然后倒着标：5. 4. 3. ……；但它不改变 tab 键焦点顺序、屏幕阅读器读取顺序或 CSS:nth-child()选择器的匹配 -
<li value="20">让这一项显示为20.，下一项若没再设value，就显示21.，不是从 1 重新开始 -
value对嵌套<ol></ol>无效，只作用于同级；和start共存时，start设基础值，value在其上覆盖 - 如果需求是“最新步骤置顶 + 编号连续”，仅靠
reversed不够——得调换<li>节点顺序，或用flex-direction: column-reverse（但会破坏键盘导航流）
最常被忽略的一点：编号是否可见，不取决于你写了多少属性，而取决于浏览器是否还认这个 <ol></ol> 是一个有效的计数上下文。一旦被 display: flex、list-style: none 或嵌套污染，原生能力就彻底退出，后续只能靠 CSS counter 手动接管——这时候语义和可访问性已经受损了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
