Less无法直接实现counter-reset和counter-increment自动递增，因其是编译时预处理器，而CSS计数器依赖DOM结构和运行时渲染；应仅用Less生成基础样式骨架，由浏览器执行计数逻辑。
Less里没法直接用counter-reset和counter-increment自动递增
因为Less是编译时预处理器，不感知DOM结构和渲染时序，counter-reset和counter-increment是CSS运行时机制，两者根本不在一个层面。试图在Less里“模拟”自动递增（比如用循环生成10个带不同counter-increment: item 1的类），不仅违背CSS计数器本意，还会导致样式表膨胀、维护困难，且无法响应动态增删元素。
真正可行的方案：用Less生成基础样式 + 原生CSS计数器逻辑
Less只负责输出干净、可复用的计数器样式骨架，把递增行为完全交给浏览器。关键在于避免手写重复规则，用Less变量和循环减少样板代码：
- 用
@counter-name统一定义计数器名，确保counter-reset和counter-increment引用一致 - 用
.loop-counter-styles()混合（mixin）批量生成多级计数器（如section、subsection）的counter-reset和::before { content: counters(...) } - 对需要编号的元素（如
h2、ol > li），只写一次counter-increment，不靠Less“算出”数值
示例：
.counter-reset(@name, @value: 0) {
counter-reset: ~"@{name} @{value}";
}
.counter-increment(@name, @value: 1) {
counter-increment: ~"@{name} @{value}";
}
h2 {
.counter-increment(section);
&::before {
content: counter(section) ". ";
}
}
ol {
.counter-reset(item);
li {
.counter-increment(item);
&::before {
content: counter(item) ". ";
}
}
}
为什么不能用for循环生成递增值
Less的each()或for只能遍历已知静态列表（如1, 2, 3），但CSS计数器的“递增”依赖元素顺序和嵌套深度，不是预先能列全的索引。强行写：
立即学习“前端免费学习笔记（深入）”；
.gen-counters(@i: 1) when (@i =< 5) {
.item-@{i} { counter-increment: item @i; }
.gen-counters(@i + 1);
}
.gen-counters();
会生成.item-1 { counter-increment: item 1; }、.item-2 { counter-increment: item 2; }……这等于手动指定每个元素的值，完全失去计数器“自动跟踪兄弟节点”的能力，且一旦DOM顺序变化就失效。
动态内容场景下必须放弃Less干预
如果编号要随JavaScript添加/删除列表项实时变化，Less生成的任何“固定值”都会立刻过期。此时唯一正确做法是：
- 用原生
counter-reset重置容器（如ol { counter-reset: item; }） - 用
counter-increment绑定到通用选择器（如ol > li { counter-increment: item; }） - 让Less只管美化
::before的样式（字体、间距、前缀符号），不碰计数逻辑
最容易被忽略的是：计数器作用域由counter-reset声明位置决定，而不是Less文件里变量声明顺序。写错重置位置，再复杂的Less封装也救不回编号错乱。
