ol的type属性仅支持"1"、"a"、"a"、"i"、"i"五个合法值，写错或混用css值会被浏览器静默忽略并退化为默认"1"；css的list-style-type始终优先覆盖type属性，动态修改应通过style或class而非setattribute。
ol 的 type 属性不能“改”出新花样——它只接受 5 个固定字符串值，写错、写多、写 CSS 风格的值，浏览器全当没看见。
type 属性合法值只有这 5 个："1"、"a"、"A"、"i"、"I"
别试 "lower-alpha"、"roman"、"decimal-leading-zero" 这类值，它们不是 HTML 规范里的合法取值，浏览器会静默忽略，退化为默认 "1"。
常见错误包括：
• 写成 <ol type="lower-roman"></ol> —— 无效
• 混淆大小写：type="i" 渲染 i ii iii，type="I" 是 I II III，二者不等价
• 误以为 type="i" 能配合 start="4" 得到 iv，实际仍是 4 → iv，但起始逻辑由 start 控制，type 只管“怎么转”，不管“从几开始”
CSS 的 list-style-type 总是覆盖 type
哪怕你写了 <ol type="A"></ol>，只要 CSS 里有 ol { list-style-type: lower-greek; }，最终显示的就是 α β γ。
这意味着：
• 项目中一旦用了全局或局部 list-style-type，type 就彻底失效，留着反而误导人
• type 只在禁用 CSS 的环境（如某些邮件客户端、终端浏览器、无障碍阅读器降级模式）下才可能生效，但此时你无法控制字体、颜色、缩进等任何样式细节
• 开发时看到 A B C，用户实际看到 α β γ，尤其在跨设备/跨 UA 场景下极易发生
想动态切换编号类型？别碰 setAttribute('type', ...)
JavaScript 中操作 type 属性，必须用 olElement.type = "i" 这种赋值方式，且只能设那 5 个合法值。olElement.setAttribute('type', 'lower-roman') 不报错但完全无效；olElement.type = 'ii' 同样被静默忽略。
更稳妥的做法是：
• 改内联样式：olElement.style.listStyleType = 'upper-roman';
• 或切换 class：olElement.classList.replace('decimal-list', 'alpha-list');，再配好对应 CSS 规则
注意：改 type 不会重置计数逻辑——如果已有 start="3"，再设 type="I"，结果仍是 III IV V，不是 I II III
真正要自定义前缀或嵌套编号，type 一点用都没有
比如 “Section 1”、“2.1.3”、“Chapter-02”，type 连边都沾不上。
必须用 CSS 计数器：
• counter-reset 和 counter-increment 是强制前提，type 对它们零影响
• 嵌套层级（1 → 1.1 → 1.1.1）得靠 counters() 函数，type 不参与解析
• 别混用 type="1" 和计数器——冗余，且旧版 Safari 或 IE 兼容模式中可能引发渲染错位
复杂点在于：很多人改完 type 看不到效果，第一反应是“是不是写错了”，其实真正该查的是有没有 CSS 覆盖、是否在禁用样式的上下文中运行、以及是否误把语义当样式用了——ol 的本质是表达“有序”，不是“我要显示大写罗马字”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
