要实现HTML列表a-z循环序号，必须放弃ol的type属性，改用CSS计数器配合JS重置或直接JS生成；CSS需结合counter-reset、counter-increment与counter-set动态归零，JS则用String.fromCharCode(97 + i % 26)映射字母。
HTML列表用a-z字母序号，不是靠ol的type属性硬配
直接写<ol type="a">确实能出a、b、c……但只支持26个以内，超出就变成aa、ab、ac——这不是你想要的“循环复用a-z”。浏览器原生ol不支持循环，也没提供接口重置计数器。真要循环，得放弃type，改用CSS或JS控制。
用CSS counter-reset + counter-increment实现a-z循环
CSS计数器可以自定义步进和值映射，配合nth-child或JS动态设counter-set就能绕过26限制。关键点是把数字映射到字母：
- 先用
counter-reset: letter 0初始化计数器 - 每个
li用counter-increment: letter累加 - 用
content: counter(letter, lower-alpha)转成小写字母 - 但
lower-alpha依然会溢出到aa——所以必须配合JS重置：每到26就设counter-set: letter 0
示例片段：
ol { counter-reset: letter 0; }
li { counter-increment: letter; }
li::before { content: counter(letter, lower-alpha) ". "; }
/* 超过26项时，需JS在第27、53…项上加 class="reset-letter" */
.reset-letter { counter-set: letter 0; }
pattern属性和a-z序号完全无关，别混用
pattern只用于表单输入校验，比如<input pattern="[a-z]{1,3}">，它不参与列表渲染。有人误以为pattern能控制显示格式，其实连边都沾不上——浏览器根本不会读pattern去生成序号。
立即学习“前端免费学习笔记（深入）”；
-
pattern只对type="text"、"email"等生效，ol或li标签上加了也无效 - 哪怕写
<li pattern="a">，解析器直接忽略该属性 - 想校验用户输入是否为a-z？那是另一回事，和列表序号无关
真要稳定循环a-z，JS手动拼接最可控
尤其当列表项来自API或动态生成时，CSS计数器难同步重置点。直接用JS生成带前缀的li内容更直白：
const items = ["苹果", "香蕉", "樱桃", "龙眼", "芒果"];
const letters = Array.from({length: items.length}, (_, i) => String.fromCharCode(97 + (i % 26)));
items.map((item, i) => `<li>${letters[i]}. ${item}</li>`).join('');注意点：
-
String.fromCharCode(97 + (i % 26))比维护['a','b',...]数组更省内存 - 97是
a的ASCII码，26个字母刚好覆盖0–25 - 服务端渲染时，这个逻辑最好后端做，避免客户端JS执行延迟导致闪动
循环边界容易漏——比如第26项是z，第27项必须回到a，而不是aa或undefined。JS里% 26天然满足，CSS里得靠额外标记，稍不注意就断掉。
