CSS如何修改列表的数字序号样式

用 ::marker 伪元素配合 CSS 计数器可精准控制有序列表序号的颜色、字体、大小和内容，是目前语义正确且现代浏览器支持的最佳方案；旧版浏览器需用 li::before + ARIA 降级兼容。

list-style-type 改不了自定义数字样式

直接改 list-style-type 只能选内置值（如 decimal、lower-roman），没法加颜色、字体大小或前缀。它控制的是“类型”，不是“外观”。真要改序号的视觉表现，得绕开这个属性。

用 counter-reset + counter-increment + ::marker 重写序号

现代浏览器（Chrome 89+、Firefox 81+、Safari 15.4+）支持用 CSS 计数器配合 ::marker 伪元素精细控制序号。这是目前最干净、语义正确的做法。

常见错误现象：li::before { content: counter(item) ". "; } 看似可行，但会破坏屏幕阅读器对列表结构的识别，且序号无法继承 li 的字体设置。

正确做法：

立即学习“前端免费学习笔记（深入）”；

ol {
  counter-reset: item;
}
ol li {
  counter-increment: item;
}
ol li::marker {
  color: #3a7ebf;
  font-weight: bold;
  font-family: "SF Pro Text", system-ui;
}
ol li::marker {
  content: counter(item) ". ";
}

注意点：

• ::marker 只接受有限样式：color、font 相关属性、content，不支持 margin 或 display
• content 在 ::marker 中不能引用 attr()，只能用 counter() 或字符串
• 旧版 Safari 对 ::marker 的 content 支持不稳定，若需兼容可降级为 li::before + ARIA 修复

IE 或老版本浏览器 fallback 方案

当必须支持 IE11 或 Android 4.4 WebView 时，::marker 不可用，只能退回到 li::before 模拟，但得手动补语义漏洞。

使用场景：内部管理后台、低流量老旧设备用户占比 >5% 的项目

实操建议：

• 给 ol 加 role="list"，每个 li 加 role="listitem"
• 用 li::before 生成序号，同时设 aria-hidden="true" 防止重复朗读
• 序号内容用 counter(item) 而非硬编码数字，保持动态性

示例片段：

ol.fallback {
  counter-reset: item;
}
ol.fallback li {
  counter-increment: item;
  position: relative;
}
ol.fallback li::before {
  content: counter(item) ". ";
  color: #3a7ebf;
  font-weight: bold;
  position: absolute;
  left: -1.5em;
  width: 1.5em;
  text-align: right;
  aria-hidden: "true";
}

字体和字号不继承到序号？检查 font-family 是否含系统字体栈

序号默认用浏览器 UA 样式渲染，常和 li 文本字体不一致。这不是 bug，是 ::marker 的默认行为——它不自动继承父级 font-family。

性能影响：无。但漏写会导致设计稿和实际显示偏差明显。

解决方式很简单：

• 显式声明 font-family 到 ol li::marker，且必须包含系统字体栈（如 "Segoe UI", system-ui）
• 避免只写 "PingFang SC" 这类单一字体，否则在 Windows 上回退失败，序号变成 Times New Roman
• font-size 同理，需单独设，不继承

容易踩的坑：以为加了 ol { font-family: ... } 就够了，结果序号还是宋体。