优先用css的list-style-type，它支持更多值（如lower-roman、upper-alpha）并可配合计数器实现自定义逻辑；type属性仅支持1、a、a、i、i五种值，语义弱、兼容性差，且混用时css可能被忽略。
ol列表该用type还是CSS控制编号样式？
直接用type属性最省事，但只支持有限几种编号类型（A、a、I、i、1），且语义弱、兼容性差；现代项目应优先用CSS的list-style-type，它支持更多值（如lower-roman、upper-alpha），还能和counter-reset/counter-increment配合实现自定义计数逻辑。
常见错误是混用两者：<ol type="A"></ol>再加list-style-type: lower-greek;，结果浏览器以HTML属性为准，CSS被忽略。建议统一走CSS路线，HTML里只留<ol></ol>干净结构。
怎么让ol列表从指定数字开始？
别手动改<li value="5">——这个属性在嵌套或动态渲染时极易错乱，且不被所有屏幕阅读器正确识别。
推荐用CSS计数器方案：
ol.start-from-5 {
counter-reset: item 4;
}
ol.start-from-5 li {
counter-increment: item;
}
ol.start-from-5 li::before {
content: counter(item) ". ";
}
要点：
-
counter-reset的初始值比目标起始数小1（想从5开始就设为4） -
::before必须显式定义content，否则不显示编号 - 如果列表项里有
<h3></h3>或<p></p>等块级元素，要确保::before的display为inline（默认就是）
ol列表嵌套时编号层级混乱怎么办？
浏览器对<ol></ol>嵌套的默认行为是：外层用1. 2. 3.，内层自动切到a. b. c.，再内层是i. ii. iii.。但这只是UA样式，不可靠，尤其跨浏览器时可能全变成数字。
真正可控的做法是逐层定义：
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
注意：
- 不要依赖
<ol type="a"></ol>嵌套，HTML属性无法传递层级语义 - 若需“1.1、1.2”这类多级编号，必须用CSS计数器+
counters()函数，不能只靠list-style-type - 无障碍测试中，嵌套
<ol></ol>比用多个独立<ol></ol>更易被读屏软件识别为子步骤
项目清单需要勾选状态，ol能直接支持吗？
不能。<ol></ol>本身是纯语义化容器，不提供交互能力。强行在<li>里塞<input type="checkbox">会破坏列表语义——屏幕阅读器可能读成“列表项，复选框”，而非“已完成第3步”。
正确解法分两层：
- 结构层：仍用
<ol></ol>包裹<li>，保持步骤顺序语义 - 交互层：每个
<li>内放<input type="checkbox" id="step-3">+<label for="step-3"></label>，用CSS隐藏原生复选框，用::before模拟带勾样式 - 状态同步：通过
:checked伪类控制<li>的opacity或添加done类，避免JS操作DOM影响性能
最容易被忽略的是for和id必须严格匹配，否则点击文字无法触发勾选——这是项目清单可用性的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
