乐趣区

关于前端:Less混合结合nthchild选择器的高级玩法

jiezi

1、先看效果图

上图中比拟麻烦的是每块的底色解决，上面看怎么解决👇

2、:nth-child(n) 选择器

匹配属于其父元素的第 N 个子元素，不管元素的类型。

n 能够是数字、关键词或公式。

  • 数字：最常见的应用形式，eg: :nth-child(1)
  • 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
  • 公式: 应用公式 (an + b)。形容：示意周期的长度，n 是计数器（从 0 开始），b 是偏移值。

3、次要思路：

  1. 使用 less 混合传参，参数既是 :nth-child(n) 选择器的公式
  2. 在混合外面解决每个原色的底色，通过 :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));

4.1、阐明：

通过 Less 混合传参，实现指定了下标是 1,2,3,4,5 的倍数的所有 li-item 元素的 伪元素背景色。

🎈🎈🎈

🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。

🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉

✨ 欢送大家评论交换，蟹蟹😊

退出移动版