@counter-style 是原生 css 特性，less 仅原样输出，不解析不处理；其生效依赖浏览器支持（仅 firefox 原生支持），实际项目多用 counter-reset + ::before 兜底。
@counter-style 不是 Less 的功能，是原生 CSS 的特性，Less 编译器完全不解析、不处理它——你直接在 Less 文件里写 @counter-style，它会被原样输出到 CSS 中，但浏览器是否支持、能否生效，和 Less 毫无关系。
换句话说：Less 不参与 @counter-style 的定义或计算，它只当这是普通 CSS 规则字符串。
为什么在 Less 里写 @counter-style 看似“能用”，其实靠的是浏览器直解
Less 是预处理器，不是运行时样式引擎。当你写：
@counter-style my-lower-chinese {
system: extends decimal;
suffix: "、";
symbols: 一 二 三 四 五 六 七 八 九 十;
}
Less 编译后就是一模一样的 CSS 输出，没做任何转换。能否生效，取决于：
– 浏览器是否支持 @counter-style（目前仅 Firefox 原生支持，Chrome / Safari 仍不支持）
– 是否正确设置了 list-style: my-lower-chinese
– 是否用了 <ol></ol> 或 display: list-item 元素
在 Less 中“模拟”自定义编号的常见替代方案
因为兼容性差，实际项目中更常用以下方式绕过 @counter-style：
- 用
counter-reset+counter-increment+::before手动控制编号逻辑（所有现代浏览器都支持） - 把编号内容写死在 HTML 中（适合静态、少变的场景）
- 用 JavaScript 动态生成编号（可控性强，但增加运行时负担）
例如用伪元素实现中文数字编号：
.list-chinese {
counter-reset: chinese-counter;
}
.list-chinese li {
list-style: none;
}
.list-chinese li::before {
counter-increment: chinese-counter;
content: counters(chinese-counter, "·") "、";
/* 注意：这里只能拼符号，无法自动映射“1→一”，需 JS 或预设变量 */
}
如果坚持用 @counter-style，要注意的硬限制
即使你决定用它（比如只面向 Firefox 内部工具），也要注意：
-
@counter-style必须定义在顶层（不能嵌套在@media、选择器或 Less mixin 里） - 名称不能含连字符以外的特殊字符（如
@counter-style my_style合法，但@counter-style my style不合法） - Firefox 当前不支持
system: cyclic配合中文符号数组的循环行为（会 fallback 到 decimal） - Less 的变量、插值（如
@name: "my-chinese"; @counter-style @{name} { ... }）在@counter-style中无效——CSS 预处理器不支持规则名动态化
真正难的不是写出来，而是让编号在 Chrome 和 Safari 里也长得一样。别被 Firefox 的支持迷惑，生产环境基本得靠 counter-increment + ::before 组合手动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
