@counter-style规则需先用@counter-style注册再通过list-style显式调用才生效，仅定义不调用无效；作用域限于list-item，嵌套列表需每层单独声明；Safari 15.4+才支持；中文编号推荐cyclic+suffix；复杂编号仍需counter-increment+counter()。
counter-style规则不生效？检查是否漏了@counter-style注册和list-style引用两步
浏览器不会自动把@counter-style定义当默认序号用，必须显式在list-style里调用名字。常见错误是只写了定义，但ul或ol上还用着默认disc或decimal，结果样式完全没变。
-
@counter-style只是“注册一个新计数器”，类似声明一个函数，不调用就不执行 - 必须配合
list-style: my-counter;（其中my-counter是你定义的名字）才生效 - 注意作用域：它只对
list-item生成的内容起作用，对::before里手动counter-increment的场景无效 - Chrome 89+、Firefox 78+支持，Safari 15.4+才开始支持——旧版Safari会直接忽略整条规则
想用中文数字（一、二、三）或带括号的编号？别硬写symbols，改用system: cyclic + suffix
symbols只适合单字符映射（比如α β γ），中文“一、二、三”这种多字词必须用additive-symbols或extends，但最稳的方案其实是cyclic系统配suffix：
@counter-style chinese-num {
system: cyclic;
symbols: "一" "二" "三" "四" "五";
suffix: "、";
}
-
cyclic会循环使用symbols列表，适合固定短序列 -
suffix加在每个编号后面，比在HTML里拼字符串更可控 - 避免用
system: extends decimal;去“扩展”中文——这会触发十进制计算逻辑，而中文没有“十一=十+一”的内置规则，容易崩 - 如果要“第 一 条”这种格式，
prefix和suffix得一起用，且空格要写进字符串里，比如prefix: "第 "
自定义计数器在嵌套列表里乱序？关键在list-style-type没继承或重置
嵌套ol默认会继承外层的list-style-type，但如果你在外层设了list-style: my-counter;，内层又没单独指定，它可能回退到decimal，导致“一、二、三 → 1.1, 1.2, 1.3”这种错乱。
- 嵌套时每一层都要显式声明
list-style，不能依赖继承 - 用
reversed属性时，@counter-style本身不控制方向，反转由ol[reversed]触发，和自定义样式无关 - 若需不同层级用不同样式（如一级用汉字、二级用阿拉伯），必须给
ol ol单独写list-style规则，且确保选择器权重足够 - 慎用
all: unset——它会清掉list-style-type，导致自定义计数器彻底失效
为什么counter-increment + counter()比@counter-style更灵活？因为前者能脱离列表结构
@counter-style只能绑定到list-style，而真实项目里常需要在标题、表格行、卡片序号等非li元素上编号——这时必须切回counter-increment + counter()组合。
立即学习“前端免费学习笔记（深入）”；
-
@counter-style定义的名字不能直接传给counter()函数；counter(my-counter)是无效语法，必须用counter(my-counter, decimal)这种带第二参数的形式（且仅限部分浏览器） - 复杂逻辑如“章节 2.3.1”需要多级计数器叠加，
counter(section, decimal) "." counter(subsection, decimal)是唯一可靠路径 -
@counter-style不支持条件切换（比如奇数行用圆点、偶数行用方块），counter()配合:nth-child才能做到 - 性能上无明显差异，但
counter()更易调试：浏览器开发者工具能看到实时计数值，而@counter-style只管渲染结果
真正难的是混合场景——比如用@counter-style做主列表，又在某个li内部用counter()标子项。这时候两个系统互不感知，得靠命名隔离和手动counter-reset来对齐起点。
