CSS如何修改列表序号样式

CSS列表序号样式控制的核心矛盾在于兼顾语义正确性与视觉定制自由度：现代浏览器推荐使用`::marker`伪元素配合CSS计数器，精准设置序号的颜色、字体、大小和内容，既保持无障碍可访问性又避免破坏列表结构；而面对旧版浏览器（如IE11或Android 4.4 WebView），则需降级采用`li::before`模拟序号并辅以ARIA属性修复语义缺陷——但无论哪种方案，都必须显式声明`font-family`和`font-size`到`::marker`或伪元素上，否则极易因字体继承失效或UA默认值劫持导致视觉偏差，真正考验开发者的是对浏览器支持边界、可访问性规范与细节渲染逻辑的综合把握。

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: ... } 就够了，结果序号还是宋体。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS如何修改列表序号样式》文章吧，也可关注golang学习网公众号了解相关技术文章。