甜点cc

V1

2022/08/05阅读:23主题:蔷薇紫

Less混合结合:nth-child()选择器的高级玩法

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、代码实现

主要思路:运用less混合传参,底色通过 :nth-child(n) 选择器结合 ::after 伪元素实现。

以下只贴颜色处理的核心代码👇

.colorLine(@index, @startColor, @endColor) {
  .li-item:nth-child(@{index})::after {
    backgroundlinear-gradient(136deg, @startColor, @endColor);
  }
}
.colorLine(1nrgba(255, 122, 109, 1), rgba(255, 77, 62, 1));
.colorLine(2nrgba(93, 219, 224, 1), rgba(0, 188, 218, 1));
.colorLine(3nrgba(59, 220, 72, 1), rgba(92, 209, 46, 1));
.colorLine(4nrgba(254, 190, 43, 1), rgba(255, 163, 0, 1));
.colorLine(5nrgba(148, 117, 247, 1), rgba(119, 83, 233, 1));

4.1、代码说明:

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


🎈🎈🎈

🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉

✨ 欢迎大家评论交流,蟹蟹😊

分类:

前端

标签:

前端

作者介绍

甜点cc
V1