Less中nth-child无法自动展开伪类，需用循环生成固定规则；如用.generate-stripes(@n, @i: 1)配合递归和字符串拼接，在编译期输出前n项奇偶背景样式。
Less里用nth-child写交替色，别直接套CSS写法
Less本身不解析:nth-child(odd)这类伪类里的表达式，它只是预处理器，不会运行时计算索引。所以你不能指望.item:nth-child(2n+1) { background: #f5f5f5; }在Less里“自动展开”成一堆具体选择器——它原样输出，和手写CSS没区别。
真正需要的是：在编译期就生成固定数量的规则，比如前10项按奇偶设背景。这时得靠Less循环 + 字符串拼接：
.generate-stripes(@n, @i: 1) when (@i =< @n) {
.item:nth-child(@i) {
background: if((@i % 2) = 1, #f5f5f5, #ffffff);
}
.generate-stripes(@n, (@i + 1));
}
.generate-stripes(10);
- 必须显式传入上限（如
10），否则递归不终止 -
@i % 2是Less内置算术，但只支持整数，@i不能是变量名或字符串 - 生成的选择器是
.item:nth-child(1)、.item:nth-child(2)……不是odd/even，避免运行时计算依赖
用each()遍历颜色数组做更灵活的条纹
如果要三色循环（比如#f0f0f0 / #e8e8e8 / #f9f9f9），nth-child(an+b)写起来很绕，而Less的each()函数配合mod()更直观：
@stripes: #f0f0f0, #e8e8e8, #f9f9f9;
.each(@stripes, {
@index: @key + 1;
.item:nth-child(3n + @index) {
background: @value;
}
});
-
@key从0开始，所以加1才匹配3n+1、3n+2、3n+3 - 生成的选择器顺序取决于数组顺序，不是DOM顺序
- 注意
each()是Less 3.5+特性，旧版本会报错Unknown function each
为什么不用:nth-of-type代替:nth-child
很多人想换用:nth-of-type避开兄弟元素干扰，但在Less循环里它没优势：
立即学习“前端免费学习笔记（深入）”；
- 生成逻辑完全一样，只是把
:nth-child换成:nth-of-type，无实质差异 - 如果列表项中间插了其他标签（如
<p>），:nth-of-type确实更准，但前提是HTML结构可控——Less无法感知DOM结构变化 - 真实项目中，交替色需求通常绑定在明确的
.item类上，用:nth-child语义更清晰，调试时也容易定位
编译后CSS体积和维护风险
循环生成的选择器越多，CSS文件越大，且无法压缩重复规则（每个:nth-child(n)都是独立声明）：
- 生成100条规则？CSS体积直增2KB+，gzip后也难优化
- 改颜色要同步改循环参数和颜色数组，漏一处就错位
- 更稳的做法：只生成前20项，超出部分回退到纯CSS的
:nth-child(odd)兜底
真正复杂的交替逻辑（比如按数据状态变色），应该交给JS动态加class，而不是在Less里硬编码索引。
