1、先看效果图
上图中比较麻烦的是每块的底色处理，下面看怎么处理👇
2、:nth-child(n) 选择器
匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
- 数字：最常见的使用方式，eg:
:nth-child(1) - 关键词:
odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。 - 公式: 使用公式
(an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
3、主要思路：
- 运用less混合传参，参数既是
:nth-child(n)选择器的公式
- 在混合里面处理每个原色的底色，通过
:nth-child(n)选择器结合::after伪元素实现。
有了思路之后，下面让我们看一下具体的代码实现👇
4、代码实现
以下只贴颜色处理的核心代码👇
.colorLine(@index, @startColor, @endColor) { .li-item:nth-child(@{index})::after { background: linear-gradient(136deg, @startColor, @endColor); } } .colorLine(1n, rgba(255, 122, 109, 1), rgba(255, 77, 62, 1)); .colorLine(2n, rgba(93, 219, 224, 1), rgba(0, 188, 218, 1)); .colorLine(3n, rgba(59, 220, 72, 1), rgba(92, 209, 46, 1)); .colorLine(4n, rgba(254, 190, 43, 1), rgba(255, 163, 0, 1)); .colorLine(5n, rgba(148, 117, 247, 1), rgba(119, 83, 233, 1)); .colorLine(6n, rgba(148, 87, 156, 1), rgba(189, 46, 221, 1));
4.1、说明：
通过Less混合传参，实现指定了下标是 1,2,3,4,5,6 的倍数的所有 li-item 元素的伪元素背景色。
