HTML 的 ol 标签 type 属性不支持中文数字，必须用 CSS counters（counter-reset + counter-increment + cjk-ideographic）实现；JS 方案破坏语义且难维护，background-image 更属反模式。
ol 的 type 属性不支持中文数字
直接写 <ol type="一"></ol> 或 <ol type="Chinese"></ol> 是无效的——HTML 标准里 type 只认 1、A、a、I、i 这五种，没有中文数字选项。浏览器会忽略非法值，回退到默认阿拉伯数字。
用 CSS 的 counter-reset + counter-increment 实现
这是最可靠、语义正确、可无障碍访问的方式。核心是重置计数器，用 ::before 伪元素配合 counter() 函数输出中文数字：
ol.chinese {
counter-reset: chinese-counter;
list-style: none;
}
ol.chinese li {
counter-increment: chinese-counter;
}
ol.chinese li::before {
content: counter(chinese-counter, cjk-ideographic) "、";
margin-right: 0.5em;
}
注意点：
-
cjk-ideographic是关键，它让计数器按“一、二、三、四…”而非“壹、贰、叁…”输出（后者需用simp-chinese-informal，但兼容性差） - 必须显式设
list-style: none，否则原生序号和伪元素会叠加 - IE11 不支持
cjk-ideographic，若需兼容，得用 JS 回退或接受“壹贰叁”形式
JavaScript 动态生成（仅当 CSS 不可行时）
比如要兼容老 IE，或序号逻辑复杂（跳过某些项、嵌套多层中文编号），才考虑 JS。简单场景没必要：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('ol.chinese li').forEach((li, i) => {
const cnNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
li.innerHTML = `<span class="cn-num">${cnNum[i] || (i+1)}</span>${li.innerHTML}`;
});
问题明显：
- 破坏语义：序号变成内联文本，屏幕阅读器可能读错
- 无法响应式更新：新增
<li>后不会自动重排 - 中文数字上限低，超过十就得扩展映射表（如加“十一”“十二”）
别用 background-image 模拟序号
有人试图用带“一、二”文字的图片做背景，再用 padding-left 避开——这属于反模式：
- 缩放或高对比度模式下文字模糊或消失
- 无法选中、复制、翻译
- 维护成本高：换字体/颜色/间距都要改图
真正需要中文序号的地方，几乎都该走 CSS counters 路线。唯一容易被忽略的是：如果 <ol></ol> 里混了 <div> 或其他非 <code><li> 元素，counter-increment 仍会对每个 <li> 生效，但视觉上可能错位——务必保证结构干净。
