@counter-style不生效主因是浏览器兼容性不足（Chrome 99+/Firefox 103+支持，Safari 17.4仍完全不支持），且必须同时满足：①正确定义system与symbols/additive-symbols；②通过list-style或counter()显式调用；③名称严格一致、无拼写错误。
为什么 @counter-style 在大多数浏览器里不生效
因为 @counter-style 是 CSS Counter Styles Level 3 的特性，Chrome 99+、Firefox 103+ 才开始支持，Safari 目前（截至 Safari 17.4）**完全不支持**。如果你写好了规则但 list-style: my-counter 没反应，先检查浏览器兼容性——不是代码错，是压根没解析。
另外，它只对 list-style 和 counter() 函数中显式引用的计数器名起作用，不会自动替换 ol 默认的 decimal 行为，必须手动指定：
ol { list-style: my-counter; }
@counter-style 必须包含 system 和 symbols 或 additive-symbols
最简可用定义至少要满足语法约束：system 决定计数逻辑（比如 cyclic 循环、numeric 进位），symbols 或 additive-symbols 提供符号映射。漏掉任一者，整个规则会被浏览器静默丢弃。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
@counter-style circle-num {
system: cyclic;
/* 缺少 symbols —— 不报错但无效 */
}正确写法（循环用三个符号）：
@counter-style circle-num {
system: cyclic;
symbols: "○" "●" "◎";
}-
system: cyclic：按顺序循环使用symbols中的项，适合无序列表或小范围编号 -
system: numeric：需配合range和pad，用于数字类扩展（如中文数字“一、二、三”） -
system: additive：适用于罗马数字等可叠加计数，必须用additive-symbols+ 元组列表
中文数字、带括号编号等复杂样式要用 numeric 系统 + range
想实现“一、二、三……”或“（一）、（二）……”，不能只靠 symbols 列表硬写几十个——得用 numeric 系统，让浏览器自动拼接：
@counter-style chinese-gan {
system: numeric;
symbols: "甲" "乙" "丙" "丁" "戊" "己" "庚" "辛" "壬" "癸";
range: 1 10;
}注意两点：
-
range必须明确指定，否则超出范围时回退到 fallback（通常是 decimal） - 符号数量必须 ≥ 最大位数所需个数；
numeric会按位权拆解数字，比如 12 → “乙”+“乙”，所以symbols是个“个位映射表” - 加括号？用
prefix/suffix：
@counter-style paren-chinese {
system: numeric;
symbols: "一" "二" "三" "四" "五";
range: 1 5;
prefix: "（";
suffix: "）";
}调试时优先检查 counter-set 和 counter-increment 是否冲突
@counter-style 定义的是“样式模板”，真正触发渲染的是计数器实例。如果用了 counter-reset 或 counter-increment，但没在 content 里调用 counter(name, style)，或者名字拼错，样式就永远不会出现。
典型误配：
li::before {
content: counter(item) " "; /* 这里用的是默认 decimal 样式 */
/* 应该写成：counter(item, my-counter) */
}还有更隐蔽的问题：父元素设置了 counter-reset: item，子元素又用 counter-increment: item，但 @counter-style item {...} 名字和 reset/increment 中的名称大小写/连字符不一致（比如写成 item-list），浏览器直接忽略该样式。
建议调试步骤：
- 确认
@counter-style规则在 CSS 文件中位于counter()引用之前（CSS 加载顺序影响解析） - 用 DevTools 的 Computed 面板看元素是否识别出
list-style值，或content计算值是否含预期符号 - Safari 用户请立刻放弃——目前没有 polyfill，只能降级用伪元素 + JS 或静态 class 控制
真正难的不是写规则，是让浏览器承认它存在，且上下文链路不断。
