当list-style-type无法满足「第1章」「A-1」「【001】」等自定义计数格式时，必须使用counter-reset与counter-increment配合伪元素实现；counter-reset设于列表容器，counter-increment设于li，content中用counter()或counters()读取值，注意分隔符、引号、空格及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 结构，也不影响屏幕阅读器对列表语义的识别——这点常被忽略，但对可访问性很关键。
