type="i"生成小写罗马数字(i、ii、iii),type="i"生成大写(i、ii、iii);二者仅大小写差异,html5中已过时,推荐用css的lower-roman/upper-roman替代。

ol type="i" 和 type="I" 的实际效果差异
小写罗马数字 type="i" 生成的是 i、ii、iii、iv…,大写 type="I" 生成的是 I、II、III、IV…。注意:浏览器渲染时,i 和 I 都是标准值,但大小写不区分字体粗细或变体,只控制字母大小写形式;部分旧版 IE 可能对 i 渲染为斜体(属样式副作用,非规范行为)。
常见错误是把 type="ii" 或 type="roman" 当作合法值——它们无效,浏览器会回退到默认 type="1",列表变成 1、2、3。
-
type只接受单字符值:"1"、"a"、"A"、"i"、"I" - HTML5 中该属性已**被标记为过时(obsolete)**,但所有主流浏览器仍支持,兼容性无问题
- 若用 JavaScript 动态设置,如
olEl.type = "i",赋值后立即生效,无需重绘或刷新
为什么用 CSS 的 list-style-type 更可靠
list-style-type: lower-roman 和 upper-roman 是 W3C 推荐方式,语义更清晰,且支持更多值(如 lower-greek、hebrew),type 属性无法扩展。
关键区别在于:CSS 可以单独作用于某一层嵌套列表,而 type 是整个 <ol></ol> 标签级属性,无法针对 <li> 细粒度控制。
- 用
style="list-style-type: lower-roman;"替代type="i",效果一致但更现代 - 若需起始值非 1(如从 iii 开始),
start属性只对type="1"稳定有效;用 CSS 时需配合counter-reset才能精准控制罗马数字起始 - 某些 CMS 或富文本编辑器会自动剥离
type属性,但通常保留内联style
JavaScript 动态切换罗马数字类型时的坑
通过 olEl.type 读写时,返回值始终是字符串,比如 document.getElementById("myOl").type 返回 "i",不是数字或布尔值。
容易忽略的一点:修改 type 不会重置计数器逻辑——如果列表已有 start="3",再设 type="I",结果仍是 III、IV、V,而非 I、II、III。
- 动态切换前建议先清空或重建 DOM,避免状态残留
-
type属性在 DOM 中是可枚举的,但不触发DOMSubtreeModified(已废弃),监听变化需用MutationObserver观察attributes - SSR 框架(如 Next.js)中服务端渲染时设
type="i",客户端 hydration 后若 JS 修改了type,可能引发水合不匹配警告
嵌套 ol 中罗马数字编号的层级错乱问题
纯靠 type 无法实现“第一层 I、II、III,第二层 a、b、c”,因为子 <ol></ol> 若没显式设 type,会继承父级?不,它不会继承——每个 <ol></ol> 默认都是 type="1",必须逐层声明。
但硬编码多层 type 值维护成本高,且无法生成 “I.1、I.2、II.1” 这类复合编号。
- 真正可控的方式是用 CSS 计数器:
counter-reset: section;+counter-increment: section;+content: counters(section, ".") -
type属性对嵌套完全无感知,它只管当前这一个<ol></ol>标签内的序号形式 - 若坚持用
type,至少确保每层<ol></ol>都有明确的type值,不要依赖隐式默认
type 属性的局限性就会立刻暴露——它是个静态开关,不是样式引擎。真要稳,还是得回到 CSS 的 list-style-type 和计数器体系。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











