HTML原生ol标签不支持拼音排序，必须用JavaScript通过Intl.Collator('zh-CN')提取li文本并重排DOM；需注意Safari兼容性、innerText/textContent选择、服务端预排序更可靠，伪CSS排序会破坏可访问性与交互逻辑。
HTML原生ol不支持拼音排序
直接用 <ol> 标签无法按汉字拼音自动排序——它只认数字序号，排序逻辑完全由浏览器控制，且仅对 value 属性做数值解析，对中文文本无任何拼音处理能力。
必须用JavaScript手动实现拼音排序
核心思路是：把 <li> 文本提取出来，用拼音排序（如 Intl.Collator 或第三方库），再按新顺序重排 DOM 节点。推荐优先用原生 Intl.Collator，避免引入额外依赖：
const ol = document.querySelector('ol');
const items = Array.from(ol.querySelectorAll('li'));
items.sort((a, b) =>
Intl.Collator('zh-CN').compare(a.textContent, b.textContent)
);
items.forEach(li => ol.appendChild(li));
注意点：
-
Intl.Collator('zh-CN')在多数现代浏览器中支持拼音排序，但 Safari 15.4 之前对多音字/生僻字排序不稳定 - 不能只靠
String.prototype.localeCompare()不带参数调用，它在不同系统 locale 下行为不一致 - 如果
<li>内含 HTML 标签，需用li.innerText替代textContent避免标签干扰排序
服务端或构建时排序更可靠
若列表内容固定（如城市名、分类目录），硬编码排序反而更可控：
立即学习“前端免费学习笔记（深入）”；
- 用 Node.js 脚本 +
node-pinyin提前生成排序后 HTML 片段 - 在 Vue/React 中，把原始数组传入组件前就用
Intl.Collator排好序，再v-for或.map()渲染 - 静态站点生成器（如 Hugo、Jekyll）可调用内置排序函数，例如 Hugo 的
{{ range sort $.Site.Pages "Title" "asc" "zh-CN" }}
警惕“伪排序”方案
有人试图用 CSS 的 counter-reset 或 content: counters() 模拟序号，但这只是视觉欺骗：
- 屏幕阅读器仍按 DOM 顺序读取，无障碍失效
- 复制粘贴时序号和文字错位
- 无法响应点击事件定位真实
<li>索引
拼音排序不是样式问题，而是数据顺序问题。DOM 顺序不对，后续所有交互、SEO、可访问性都会出偏差。
