如何用 CSS 实现带圆圈数字的有序列表（兼容 Safari，兼顾可访问性）-html教程-PHP中文网

如何用 css 实现带圆圈数字的有序列表（兼容 safari，兼顾可访问性）

本文详解如何通过 @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项”等）。

以下是一个生产就绪的实现：

/* 定义名为 '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 输出结构）：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

<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="❶" 是无效语法 */

? 备选方案（仅当需支持极老浏览器时启用）

若项目必须兼容 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 输出即可一键获得专业级圆圈数字列表，代码清晰、维护成本低，且面向未来标准演进具备良好延展性。