是唯一正确起点,必须用包每条内容,结构非法或样式覆盖(如list-style:none)会导致编号消失;start和reversed仅改视觉编号,不改变dom顺序与可访问性逻辑。

<ol></ol> 是唯一正确起点,手写“1.”“一、”或用 <div> 套数字都是错的——语义丢失、屏幕阅读器读不出顺序、JS 动态增删时编号立刻错乱。
<h3>必须用 <code><li> 包每一条内容
浏览器只认 <ol></ol> 直接子元素是 <li>。其他任何写法都会让编号消失或结构失效:
-
<ol>第一项</ol>→ 纯文本被忽略,不显示编号 -
<ol><p>第一项</p></ol>→<p></p>不是合法子元素,解析失败 -
<ol> <li>第一项</li> <li>第二项</li> </ol>✅ 唯一合规结构
start 和 reversed 的真实行为
这两个属性只影响视觉编号,不改变 DOM 顺序或可访问性逻辑:
-
start="5":从 5 开始显示,但屏幕阅读器仍播报“第 1 项” -
reversed:仅对type="1"(默认数字)生效;设了type="a"或type="I"后,reversed被忽略 -
start必须是整数,start="-2"或start="3.5"都会退化为start="1" - IE11 及更早版本不支持
start,始终从 1 开始
别用 type 属性控制样式
type 是 HTML4 遗留方案,支持弱、不可扩展、易和 CSS 冲突:
-
type="1"冗余,默认就是它,写了反而可能在旧环境被误解析 -
type不支持中文(如“一、二、三”)、emoji、图标或前缀文字(如“Step 1.”) - 真正要改样式,用 CSS:
list-style-type: upper-alpha、lower-roman等更稳 - 要实现“1.1”“1.2”这种嵌套编号,
<ol><ol></ol></ol>原生做不到——必须用counter-reset+counter-increment+counters()
考卷/条款类场景最容易漏掉的三件事
这类列表对语义和打印一致性要求极高,光写对结构还不够:
- 大题标题不能直接塞进
<ol></ol>,必须包在<li>里,否则校验失败、JS 获取不到节点 - 汉字编号(一、二、三)不能靠
type,得用list-style-type: simp-chinese-informal(Chrome/Firefox 支持),但 Safari 不认——生产环境建议用::before+counter(major, cjk-ideographic) - 打印 PDF 时,
list-style-position: outside容易导致换行缩进错位,务必在@media print里显式重置











