用 ::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: ... } 就够了，结果序号还是宋体。
::marker 是目前唯一既保语义又可控的表现方案，但它的样式能力有限，而且浏览器支持度仍需核对具体项目目标环境。真正麻烦的从来不是怎么写，而是写完之后，在某个安卓 WebView 里序号突然变大两倍——那大概率是 font-size 没显式设，被 UA 默认值劫持了。 
