@counter-style 在多数项目中无法使用，因其浏览器支持极差：chrome 106+（2022.9）、firefox 117+（2023.9）才支持，safari 至今（2024年中）完全不支持，导致兼容 ios 时必须回退为阿拉伯数字且无提示。
为什么 @counter-style 在多数项目里根本用不上
因为浏览器支持太差：Chrome 直到 106 才开始支持（2022 年 9 月），Firefox 从 117 起才支持（2023 年 9 月），Safari 至今（2024 年中）仍完全不支持。这意味着只要页面需兼容 Safari（包括 iOS 所有设备），@counter-style 就不能用于生产环境。
它不是“CSS 新特性里比较稳的那个”，而是目前最不可靠的计数器方案之一。你写的 @counter-style my-roman { system: additive; ... } 在 iPhone 上会直接回退成默认阿拉伯数字，且毫无提示。
@counter-style 的基本写法和必须填的字段
它不像 @keyframes 那样宽松——漏掉关键块，整个规则会被浏览器静默丢弃。
-
system必须指定，常见值：symbolic（循环符号）、alphabetic（字母序列）、numeric（进位数值）、additive（累加式，如罗马数字） -
suffix推荐显式设为"."或""，否则不同浏览器默认值不一致（有的加点，有的不加） -
range建议明确限定，比如range: 1 100;，否则超出范围时可能直接 fallback 到decimal -
pad和fallback不是可选装饰项——如果要用numeric系统但希望个位数补零（如 01, 02），就必须写pad: 2 "0";
示例：一个带括号、全小写的希腊字母编号
@counter-style greek-lower {
system: alphabetic;
symbols: "α" "β" "γ" "δ" "ε" "ζ" "η" "θ" "ι" "κ" "λ" "μ" "ν" "ξ" "ο" "π" "ρ" "σ" "τ" "υ" "φ" "χ" "ψ" "ω";
suffix: ")";
range: 1 24;
}
替代方案：什么时候该放弃 @counter-style 改用 counter() + ::before
当你需要 Safari 兼容、要控制每个 <li> 的精确样式（比如编号颜色独立于文字）、或想动态切换编号格式时，counter() 是唯一靠谱路径。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
counter-reset在父元素初始化，counter-increment在<li>上递增 -
::before里用content: counter(my-counter, lower-greek) ")"—— 这里的lower-greek是内置类型，安全可用 - 若需自定义映射（如把 1→"壹"、2→"贰"），只能用 JS 动态写
data-*属性再用 CSS 匹配，或直接内联style="--num: 壹;"
注意：counter() 不支持任意 Unicode 字符串拼接（比如 counter(n) " → " 可以，但 "第" counter(n) "条" 在旧版 Safari 会丢掉中文前缀）
容易被忽略的继承与重置陷阱
@counter-style 定义后不会自动生效，必须在 list-style-type 中显式调用名称：
ol.my-list { list-style-type: greek-lower; }
但更麻烦的是嵌套列表：
- 子
<ol></ol>默认继承父级counter，但@counter-style名称不会自动继承；你得单独给子列表写list-style-type: my-sub-style; - 如果父列表用了
reversed，@counter-style完全不响应反转逻辑——它只管“当前值对应什么符号”，不参与顺序计算 -
counter-reset会重置所有后代计数器，但@counter-style本身无作用域，同名规则全局覆盖（改一个地方，所有用它的列表都变）
真正在意细节控制的话，别碰 @counter-style —— 它设计目标是“声明式字体级替换”，不是“前端灵活编号系统”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
