本文详解如何通过 @counter-style 自定义有序列表的圆圈数字样式，支持 Safari 等主流浏览器，保持语义化 HTML 结构与无障碍可访问性，并实现编号字体与列表内容字体分离控制。
本文详解如何通过 @counter-style 自定义有序列表的圆圈数字样式，支持 Safari 等主流浏览器，保持语义化 HTML 结构与无障碍可访问性，并实现编号字体与列表内容字体分离控制。
在现代 Web 开发中，为有序列表（<ol></ol>）添加美观的「带圆圈数字」（如 ①、②、③）是常见设计需求。尤其在 Pandoc 生成的 Markdown 文档中，开发者常希望用纯 CSS 类（如 .circled-numbers）统一控制样式，而非手动插入 Unicode 字符或破坏语义结构。
✅ 推荐方案：@counter-style —— 语义、兼容、可维护
W3C 标准的 @counter-style 规则专为此类场景而生，它允许你定义一个可复用、可继承、可无障碍识别的计数器样式，且完全保留 <ol><li></ol> 的原生语义和屏幕阅读器支持（如自动播报“第1项”“第2项”等）。
以下是一个生产就绪的实现：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
/* 定义名为 'circled-decimal' 的自定义计数器 */
@counter-style circled-decimal {
system: fixed;
/* 使用 Unicode 圆圈数字：⓪ ① ② … ⑨，共10个基础符号 */
symbols: '⓪' '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨';
/* 可选：添加空格后缀，避免紧贴文字 */
suffix: ' ';
/* 可选：指定 fallback 行为（当超出10项时回退为普通数字） */
fallback: decimal;
}
/* 应用于目标容器内的所有 ol */
.circled-numbers ol {
list-style: circled-decimal;
/* 确保不覆盖默认 display 和计数逻辑 */
counter-reset: none; /* 避免意外重置 */
}
/* 关键：独立控制编号字体，不影响 li 内容 */
.circled-numbers ol {
font-family: "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
font-size: 1.1em;
line-height: 1.4;
}
/* 若需进一步微调编号颜色/粗细（仅影响圆圈数字） */
.circled-numbers ol {
color: #2563eb; /* 蓝色圆圈数字 */
font-weight: bold;
}
/* 列表项文字字体保持独立（示例） */
.circled-numbers ol li {
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1rem;
}对应 HTML（Pandoc 输出结构）：
<div class="circled-numbers">
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>⚠️ 注意事项与兼容性保障
-
Safari 支持现状：截至 2026 年，Safari 16.4+ 已完整支持
@counter-style（CanIUse 数据），无需前缀。旧版 Safari（≤15.x）将优雅降级为默认阿拉伯数字（decimal），不报错、不崩坏、仍可访问。 -
无障碍友好：
@counter-style不改变<ol></ol>的 ARIA 语义，屏幕阅读器仍按标准序号播报（如 “list with 3 items, 1 of 3, First item”），优于list-style: none + ::before方案。 -
字体隔离关键：
@counter-style本身不控制字体，但list-style应用于<ol></ol>元素，其font-*属性仅作用于标记区域（即圆圈数字），而<li>内容字体由自身样式决定——这完美满足“编号字体 ≠ 内容字体”的需求。 -
不推荐的写法（务必避免）：
/* ❌ 错误：list-style-type 不接受 Unicode 字符串 */ li { list-style-type: '①'; } /* ❌ 错误：内联 style 中写 list-style-type="❶" 是无效语法 */ <li style="list-style-type: '❶'">...</li>
? 备选方案（仅当需支持极老浏览器时启用）
若项目必须兼容 Safari ≤15 或 IE，可结合 @supports 特性查询做渐进增强：
.circled-numbers ol {
list-style: decimal; /* 默认兜底 */
}
@supports (list-style: circled-decimal) {
.circled-numbers ol {
list-style: circled-decimal;
}
}? 提示：
@counter-style是目前唯一同时满足语义化、可访问性、字体分离、Safari 兼容、无 JS 依赖的标准化方案。相比::marker（不支持圆角/背景）或::before + counter()（需手动管理counter-reset、易出序号错乱），它更简洁、更健壮。
通过以上配置，你的 Pandoc Markdown 输出即可一键获得专业级圆圈数字列表，代码清晰、维护成本低，且面向未来标准演进具备良好延展性。
