ol 的序号由 start 和 type 共同决定,而非手动修改;start 值错误、type 不匹配或 CSS 隐藏(如 list-style: none)会导致序号“看似未变”;type 仅支持五种值且影响语义,list-style-type 纯视觉控制;自定义前缀需用 CSS 计数器;嵌套编号依赖 counters() 函数;动态插入 li 时 start 不自动重算,应优先使用 counter-reset。

ol 的序号不是“修改”出来的,而是由 start 和 type 共同决定的计数逻辑——写错值、配错组合、或被样式遮蔽,它就“看起来没变”。
为什么写了 start="5" 还是从 1 开始?
这不是 bug,是常见配置失效。核心原因有三个:
-
start值被浏览器静默转换:写成start="5.8"或start="five",前者变成5,后者直接退化为默认1 -
type和start没配合:比如想从字母 c 开始,却写<ol type="a" start="c">——start只接受整数,必须写start="3" - 序号被 CSS 隐藏了:
list-style: none、display: flex、或父容器aria-hidden="true"都会让编号不可见,但start仍在后台计算
type="i" 和 list-style-type: lower-roman 有什么区别?
它们走的是两条完全独立的通路:
-
type是 HTML 属性,影响 DOM 语义和部分 JS 行为(如读取ol.type返回"i"),只支持"1"、"a"、"A"、"i"、"I"五种值 -
list-style-type是 CSS 属性,纯视觉控制,支持更多值(如lower-greek、armenian),但 JS 无法通过它感知当前序号类型 - 两者同时存在时,CSS 会覆盖 HTML 的显示效果,但不会改变
ol.type的 DOM 值;混用可能在 Safari/Chrome 中行为不一致
怎么让列表显示 “第3章”“第4章” 这类带文字的序号?
type 和 start 都做不到——它们不支持插入前缀或后缀。必须用 CSS 计数器:
立即学习“前端免费学习笔记(深入)”;
- 给
ol加counter-reset: chapter(重置计数器) - 给每个
li加counter-increment: chapter(递增) - 用
li::before { content: "第" counter(chapter) "章 "; }插入内容 - 若要从“第3章”开始,写
counter-reset: chapter 2(注意:这里是起始值减 1)
嵌套 ol 时,子列表怎么继承父级编号(如 3.1、3.2)?
start 和 type 不跨层级传递,外层设了 start="3",内层仍从 1 开始。真要实现多级编号,得靠 CSS 的 counters() 函数:
- 外层
ol:counter-reset: section - 内层
ol:counter-reset: subsection -
li::before:content: counters(section, ".") ". " - 这样第一层是
1、2,第二层自动变成1.1、1.2、2.1
最易被忽略的一点:动态插入新 li 时,start 不会自动重算——浏览器按当前项数 + start 推导新序号,不是“接着最后一个显示值+1”。需要稳定可控的编号逻辑,优先用 CSS counter-reset 而非依赖 start 的自动递增。



















