ol 的 type 属性仅支持 "1"、"a"、"a"、"i"、"i" 五种值，其余均被忽略并退化为 "1"；css 的 list-style-type 总是覆盖 type，且 type 无法实现自定义编号、嵌套层级或动态重置计数。
ol 的 type 属性只接受 5 个固定字符串值
它不是配置项，而是硬编码开关：只能是 "1"、"a"、"A"、"i"、"I"。其他任何写法（比如 "lower-roman"、"ii"、"decimal-leading-zero"）浏览器直接忽略，退化为默认 "1"。
常见错误包括：
- 把 CSS 值误当 HTML 属性用，例如
<ol type="lower-alpha"></ol>—— 无效 - 大小写混淆：
type="i"渲染为 i ii iii，type="I"是 I II III，二者不等价 - 以为
type="i"能配合start="3"得到 iii iv v —— 实际仍是 3 4 5（罗马数字起始值不受start控制）
type 和 list-style-type 冲突时，CSS 总是赢
哪怕你写了 <ol type="A"></ol>，只要 CSS 中有 ol { list-style-type: lower-greek; }，最终显示的就是 α β γ，不是 A B C。
这意味着：
- 一旦项目里用了全局或局部的
list-style-type，type就彻底失效，删掉更干净 - 只有在禁用 CSS 的环境（如某些邮件客户端、终端浏览器、无障碍阅读器降级模式）下，
type才会“露脸”——但此时你无法控制字体、颜色、间距等基础表现 - 开发时看到一种效果，用户实际看到另一种，尤其在跨设备/跨 UA 场景下极易发生
需要自定义前缀或嵌套编号时，type 完全没用
比如 “Section 1”、“2.1.3”、“Chapter-02”，type 连边都沾不上。必须用 CSS 计数器：
ol.section { counter-reset: section; }
ol.section li { counter-increment: section; }
ol.section li::before { content: "Section " counter(section) " "; }
注意点：
-
counter-reset和counter-increment是强制前提，type对它们零影响 - 不要混用
type="1"和计数器——冗余，且旧版 Safari 或 IE 兼容模式中可能引发渲染错位 - 嵌套层级（如 1 → 1.1 → 1.1.1）得靠
counters()函数，type不参与解析
动态修改 type 时容易忽略的细节
用 JavaScript 设置 olEl.type = "i" 立即生效，但不会重置计数逻辑。如果列表已有 start="3"，再设 type="I"，结果仍是 III IV V，不是 I II III。
所以：
- 读取时
olEl.type返回字符串（如"i"），不是数字或布尔值 - 动态切换前建议清空或重建 DOM，避免状态残留
- SSR 框架（如 Next.js）中服务端设
type="i"，客户端 hydration 后若 JS 修改了type，可能触发水合不匹配警告
type，或者你在用它干本该由 CSS 计数器完成的事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
