ol 元素用 type="i" 或 type="i" 可显示大写或小写罗马数字，但仅作用于当前层且兼容性差；推荐使用 css 的 list-style-type: upper-roman/lower-roman 并配合 counter 控制，兼顾嵌套、可访问性与浏览器兼容性。
ol 元素用 type="I" 或 type="i" 就能显示大写或小写罗马数字，但要注意浏览器兼容性和语义优先原则——直接写 type 属性虽快，却容易在嵌套、重置、可访问性场景下出问题。
type="I" 和 type="i" 是最简写法，但只对顶层生效
HTML 原生 type 属性确实支持罗马数字：type="I" 输出 I、II、III，type="i" 输出 i、ii、iii。但它仅作用于当前 ol，且不继承、不穿透嵌套子列表。
- 嵌套的
ol必须单独加type="i"，否则默认回退为阿拉伯数字 -
start属性仍可用，比如<ol type="i" start="3"></ol>会从 iii 开始，但不能跳到 vii —— 它按顺序递增，不是按罗马数规则解析起始值 - Firefox 和 Chrome 都支持，但 Safari 在某些旧版本中对
type="i"渲染不一致（如把 ii 显示为 2）
list-style-type: upper-roman / lower-roman 更可靠
用 CSS 替代 type 属性是更稳妥的选择，尤其当需要统一控制多层列表或响应式适配时。
-
list-style-type: upper-roman对应大写罗马数字，lower-roman对应小写 - 可配合
counter-reset精确控制起始值，比如counter-reset: li 2让第一个li显示为 iii - 嵌套时，每层
ol可独立设样式：ol ol { list-style-type: lower-roman; } - 注意：IE11 及更早版本不支持
lower-roman，需降级为upper-roman或用 JS 补充
value 属性不能用于罗马数字编号
li 的 value 属性只接受整数，浏览器会把它转成阿拉伯数字再映射到当前 type 序列。即使你写了 <li value="4">...</li> + type="i"，结果仍是 iv，不是你手动写的 “IV” 字符串。
-
value不影响罗马数字的拼写逻辑，只改变计数起点 - 想自定义 “Step IV” 这类带前缀的编号，必须用 CSS
counter()+::before伪元素 - 屏幕阅读器仍会读出数值（如 “four”），而不是罗马字符发音，这点对可访问性很重要
嵌套列表里罗马数字容易错位
常见错误是只给外层 ol 设 type="I"，内层没处理，导致第二层突然变成 1、2、3。更隐蔽的问题是 CSS list-style-position: inside 会让罗马数字过长时换行错乱。
- 推荐写法：
ol { list-style-type: upper-roman; } ol ol { list-style-type: lower-roman; } - 若用
type属性，必须每一层都显式声明：<ol type="I"><ol type="i">...</ol></ol> - 避免用
padding-left手动缩进 —— 它和list-style-position: outside冲突，罗马数字可能被裁切
真正麻烦的不是怎么让罗马数字显示出来，而是它一旦嵌套、重置、国际化或被屏幕阅读器解析，就暴露原始 HTML 属性的局限性。所以别省那几行 CSS —— 直接上 list-style-type，留 type 属性给原型阶段快速验证就行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
