默认用阿拉伯数字编号,起始值用 start 属性控制,样式由 list-style-type(非过时的 type)设定,嵌套编号需 css 计数器实现,滥用 value 会破坏可访问性。

直接用 <ol></ol> 就能生成数字编号,不需要手动写“1.”“2.”——浏览器默认就是 decimal(阿拉伯数字),但真正控制编号行为的,是 HTML 属性和 CSS 的组合,不是单靠某个标签。
用 start 改起始数字,别碰 value 除非真要跳号
想从 5 开始编号?写 <ol start="5"></ol> 即可。浏览器会自动递增:5、6、7……
-
start是整数,支持负值(如start="-2"→ -2, -1, 0) - 避免对每个
<li>都加value,它只该用于**逻辑上必须中断编号**的场景(比如法规条文删掉第 3 款后,第 4 款仍标“4”) - 滥用
value会导致屏幕阅读器播报错乱,且嵌套时无法继承父级计数
list-style-type 才是控制样式的主力,type 属性已过时
HTML 的 type 属性(如 type="A")虽还能用,但已被规范标记为“不推荐”,且不支持括号、点号等常见排版需求。应改用 CSS:
-
ol { list-style-type: lower-alpha; }→ a, b, c -
ol { list-style-type: upper-roman; }→ I, II, III - 要加括号或点号?必须用
::before+counter(),例如:ol li::before { content: counter(list-item) ". "; } - 注意:若全局 CSS 重置了
list-style(如ol { list-style: none; }),编号会直接消失,得显式恢复
嵌套列表编号不连贯?原生 <ol></ol> 不支持 “1.1” 这种格式
写两层 <ol><ol></ol></ol>,内层默认还是从 1 开始,不会自动拼前缀。要实现 “1.1”“1.2”“2.1”,必须用 CSS 计数器:
- 外层:
ol { counter-reset: section; }+li::before { content: counters(section, ".") " "; counter-increment: section; } - 内层
<ol></ol>不再用start或type,全由 CSS 控制 - 如果某层要用字母(如 1.A、1.B),得单独定义新计数器:
counter-reset: subsection;,再配合counter(subsection, upper-alpha) - 别指望
<li value="1.1">——value只接受整数,写小数会失效
最常被忽略的是语义与可访问性的隐性成本:手动写序号、用 <ul></ul> + 伪元素模拟编号、或过度依赖 value,都会让屏幕阅读器无法正确传达顺序逻辑。编号不只是视觉问题,它是 DOM 结构的一部分。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











