CSS伪元素实现有序列表自定义计数器

当浏览器原生的 list-style-type 无法满足「第1章」「A-1」「【001】」等复杂自定义编号需求时，CSS 伪元素配合 counter-reset、counter-increment 和 counter()/counters() 函数成为唯一可靠且语义正确的解决方案；本文深入剖析了计数器的正确作用位置、嵌套层级处理、content 字符串拼接细节、格式关键字的准确写法（如 decimal-leading-zero 不可加引号）、IE11 兼容性陷阱及可访问性保障要点，帮你避开常见坑点，写出既强大又健壮的自定义有序列表样式。

list-style-type 不能满足自定义计数格式时，必须用 counter-reset + counter-increment

浏览器原生 list-style-type 只支持有限几种样式（如 decimal、lower-roman），一旦需要「第1章」「A-1」「【001】」这类组合格式，它就完全失效。这时候伪元素配合 CSS 计数器是唯一可靠路径。

实操要点：

• counter-reset 要放在列表容器（如 ol 或 ul）上，不是 li；重置名可以自定义，比如 counter-reset: chap 0
• counter-increment 必须写在 li 上，每次渲染一个 li 就加 1；若想跳过某项不计数，加 counter-increment: none
• 伪元素 ::before 中用 content: counter(chap) 读取值，多个计数器可嵌套，比如 content: "第" counter(chap) "章"

用 counter() 和 counters() 的区别决定是否要层级编号

counter() 只读当前层计数器，counters() 支持按名称拼接多级（比如「2.3.1」）。如果你的 HTML 是嵌套 ol，且希望子列表继承父级前缀，就必须用 counters()。

常见错误现象：

• 写了嵌套 ol 却只用 counter(section)，结果所有子项都显示为「1」「2」，没带父级前缀
• counters() 第二个参数漏写分隔符，比如 counters(sec, ".") 缺了引号，浏览器直接忽略该声明
• 父容器没设 counter-reset，子 ol 却调 counters()，返回空字符串

content 中插入非计数文本时，引号和空格容易被忽略

content 值是字符串拼接，但 CSS 不像 JS 那样自动加空格或转义。比如想实现「【001】标题」，content: "[" counter(item, decimal-leading-zero) "] " 里方括号必须用英文引号包裹，末尾空格也要显式写出来，否则紧贴文字。

参数差异注意点：

• counter(item, decimal-leading-zero) 中的 decimal-leading-zero 是关键字，不能写成 "decimal-leading-zero"（加引号反而失效）
• 中文标点如「第」字后要留空格，得手动写 "第" counter(chap) " 章"，不然会变成「第1章」——看起来对，但排版可能挤
• 如果计数器值需大写英文字母，用 upper-alpha，不是 uppercase（后者是文本转换，不作用于 counter()）

IE11 及更老浏览器不支持 decimal-leading-zero 等新格式

IE11 能识别 counter() 和基础格式（decimal、lower-alpha），但 decimal-leading-zero、upper-roman 等全部无效，会回退成 decimal。这不是 bug，是标准实现滞后。

兼容性应对建议：

• 不强依赖前导零时，改用 JS 动态生成文本内容（data-counter + :before 拼接）更可控
• 若必须纯 CSS，可用两个计数器模拟：一个主计数，一个用于补零逻辑（但仅限固定位数，如三位数就用 counter(n) 不成立——CSS 没条件运算）
• 真正要兼容 IE，放弃 decimal-leading-zero，改用背景图或 SVG 序号图标替代

伪元素做计数器的本质是样式层叠加，它不改变 DOM 结构，也不影响屏幕阅读器对列表语义的识别——这点常被忽略，但对可访问性很关键。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~