html有序列表的type属性无法在中途改变编号样式，因其仅作用于整个元素且不支持单独设置；需用css计数器或拆分多个实现视觉或语义上的编号切换。
HTML有序列表不能在“中途”直接改变编号大小——type 和 start 是作用于整个 <ol></ol> 元素的属性，不支持对单个 <li> 动态切换编号样式（比如前3项用数字、第4项突然变成大写字母）。真要实现视觉上“中途变大小”，得靠 CSS 计数器或结构拆分，而不是依赖 <ol></ol> 原生行为。
为什么 type 不能在列表中间生效
type 属性只在 <ol></ol> 标签上声明一次，浏览器据此统一渲染全部子项；它不是每个 <li> 的独立开关。写成这样是无效的：
<ol type="1"> <li>第一项</li> <li type="A">第二项</li> <!-- ❌ type 不是 <li> 的合法属性 --> </ol>
常见错误还包括试图用 value 强行跳转类型（如 <li value="A">），但 value 只接受阿拉伯数字，浏览器会忽略非法值并继续按默认逻辑递增。
用 CSS counter() 实现“视觉中途切换”
真正可控的方式是放弃 <ol></ol> 的自动编号，改用 CSS 计数器 + ::before 伪元素手动注入序号。这样每级、每项都能单独控制格式和起始值。
- 用
counter-reset在父容器初始化计数器（可设初始值） - 用
counter-increment在目标元素上触发计数 - 用
counter(name, style)在::before中输出，style支持decimal、upper-alpha、lower-roman等
例如让前3项用数字、后2项用大写字母：
<div class="mixed-list">
<div class="item num">内容一</div>
<div class="item num">内容二</div>
<div class="item num">内容三</div>
<div class="item alpha">内容四</div>
<div class="item alpha">内容五</div>
</div>
<p><style>
.mixed-list {
counter-reset: num-count 0, alpha-count 0;
}
.item.num {
counter-increment: num-count;
}
.item.alpha {
counter-increment: alpha-count;
}
.item.num::before {
content: counter(num-count) ". ";
}
.item.alpha::before {
content: counter(alpha-count, upper-alpha) ". ";
}
</style></p>
用嵌套 <ol></ol> 拆分语义段落
如果内容本身有逻辑分组（比如“准备阶段→执行阶段→收尾阶段”），更推荐用多个 <ol></ol> 分开写，并显式设置 start 值来衔接编号。这种方式语义清晰、无需 JS、兼容性好。
- 第一段用
<ol type="1"></ol>，默认从 1 开始 - 第二段用
<ol type="A" start="4"></ol>，表示“接续第4项，用大写字母” - 注意：两段之间不能留空或插入无关标签，否则语义断裂
示例：
<ol type="1"> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol><ol type="A" start="4"> <li>第四步（标为 D）</li> <li>第五步（标为 E）</li> </ol>
真正难的不是怎么写代码，而是判断该用哪种方式：纯展示需求选 CSS 计数器；需要语义化、SEO 或屏幕阅读器支持，就老实用多段 <ol></ol> + start 拆分——别指望一个 <ol></ol> 吃下所有变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
