Less无法直接实现counter-reset和counter-increment自动递增，因其是编译时预处理器，而CSS计数器依赖DOM结构和运行时渲染；应仅用Less生成基础样式骨架，由浏览器执行计数逻辑。
Less里没法直接用
和
自动递增
因为Less是编译时预处理器，不感知DOM结构和渲染时序，
和
是CSS运行时机制，两者根本不在一个层面。试图在Less里“模拟”自动递增（比如用循环生成10个带不同
的类），不仅违背CSS计数器本意，还会导致样式表膨胀、维护困难，且无法响应动态增删元素。
真正可行的方案：用Less生成基础样式 + 原生CSS计数器逻辑
Less只负责输出干净、可复用的计数器样式骨架，把递增行为完全交给浏览器。关键在于避免手写重复规则，用Less变量和循环减少样板代码：
用
统一定义计数器名，确保
和
引用一致
用
混合（mixin）批量生成多级计数器（如
、
）的
和
对需要编号的元素（如
、
），只写一次
，不靠Less“算出”数值
示例：
为什么不能用
循环生成递增值
Less的
或
只能遍历已知静态列表（如
），但CSS计数器的“递增”依赖元素顺序和嵌套深度，不是预先能列全的索引。强行写：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
会生成
、
……这等于手动指定每个元素的值，完全失去计数器“自动跟踪兄弟节点”的能力，且一旦DOM顺序变化就失效。
动态内容场景下必须放弃Less干预
如果编号要随JavaScript添加/删除列表项实时变化，Less生成的任何“固定值”都会立刻过期。此时唯一正确做法是：
用原生
重置容器（如
）
用
绑定到通用选择器（如
）
让Less只管美化
的样式（字体、间距、前缀符号），不碰计数逻辑
最容易被忽略的是：计数器作用域由
声明位置决定，而不是Less文件里变量声明顺序。写错重置位置，再复杂的Less封装也救不回编号错乱。
counter-resetcounter-incrementcounter-resetcounter-incrementcounter-increment: item 1@counter-namecounter-resetcounter-increment.loop-counter-styles()sectionsubsectioncounter-reset::before { content: counters(...) }h2ol > licounter-increment.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) ". ";
}
}
}foreach()for1, 2, 3.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; }counter-resetol { counter-reset: item; }counter-incrementol > li { counter-increment: item; }::beforecounter-reset