最稳妥方式是用 css 的 list-style-type: upper-alpha；html 的 type 属性在 html5 中已废弃，行为不可靠，应避免使用，推荐通过 class 控制样式以确保可访问性、一致性与可维护性。
直接用 list-style-type: upper-alpha 最稳妥
HTML 的 type 属性（比如 type="A"）在 HTML5 中已被标记为废弃（obsolete），浏览器虽暂未完全移除，但行为不可靠：Safari 可能忽略，IE8 及更早版本解析错乱，屏幕阅读器也更信任 CSS 控制的样式。真正该写的不是 HTML 属性，而是 CSS。
最简方式是给 <ol></ol> 加内联样式：<ol style="list-style-type: upper-alpha;"></ol>。但更推荐用 class：
<ol class="section-list"></ol>- 配 CSS：
.section-list { list-style-type: upper-alpha; }
这样可复用、易维护，服务端渲染（SSR）也无副作用。
type="A" 为什么有时看起来“能用”，但别信它
你写 <ol type="A"></ol> 后浏览器真显示了 A、B、C，不代表它可靠——这只是兼容性残留。常见问题包括：
- 混用大小写逻辑：比如父级
type="a"、子级type="A"，部分旧浏览器会重置计数或错位 - 和 CSS 冲突：一旦同时写了
type="A"和style="list-style-type: lower-roman"，CSS 会覆盖 HTML 属性，type形同虚设 - 超出规范值就失效：写成
type="upper-alpha"或type="roman"，浏览器直接忽略，回退到默认数字
W3C 明确建议停止使用 type 控制编号样式，它只保留在 HTML4 兼容层里苟延残喘。
嵌套时想外层大写字母、内层数字，必须严格嵌套 + CSS 分层控制
如果目标是 A. → 1. → a. 这类结构，光靠 type 很难稳住层级连续性。关键点有二：
- 子
<ol></ol>必须放在父级<li>内部，不能并列在父外面，否则浏览器视为全新列表，必然重置为 A 或 1 - 用 CSS 类分层更可控：
.level-1 { list-style-type: upper-alpha; }、.level-2 { list-style-type: decimal; }、.level-3 { list-style-type: lower-alpha; }
例如：<ol class="level-1"><li>A. 主项<ol class="level-2"><li>1. 子项</li></ol>
</li></ol>。这样既语义清晰，又避免 type 在嵌套中行为飘忽。
动态切换编号类型时，千万别调 setAttribute('type', ...)
JavaScript 操作时，常见错误是：
- ❌
olEl.setAttribute('type', 'A')—— 已废弃属性，无效且污染 DOM - ✅ 正确做法是改 CSS：
olEl.style.listStyleType = 'upper-alpha'，或切 class：olEl.classList.replace('decimal-list', 'alpha-list')
用 class 切换还便于配合 data 属性驱动逻辑，比如根据章节类型自动应用 class="chapter-alpha" 或 class="appendix-roman"，比硬编码 type 健壮得多。
真正容易被忽略的是：编号不只是“看起来像 A”，它关系到可访问性、打印样式、SEO 解析和跨浏览器一致性。用 CSS list-style-type 不是多此一举，而是把控制权从浏览器的兼容层收回到标准层——哪怕只是换字母，也得按标准来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
