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 元素的伪元素背景色


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

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

欢迎大家评论交流,蟹蟹

Less混合结合:nth-child()选择器的高级玩法的更多相关文章

  1. 轻量级高性能ORM框架:Dapper高级玩法

    Dapper高级玩法1: 数据库中带下划线的表字段自动匹配无下划线的Model字段. Dapper.DefaultTypeMap.MatchNamesWithUnderscores = true; 备 ...

  2. 【ASP.NET Core】依赖注入高级玩法——如何注入多个服务实现类

    依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来.服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了依 ...

  3. 【Python基础】random 的高级玩法

    random 模块的高级玩法 1.python 随机产生姓名 方式一: import random xing = [ '赵', '钱', '孙', '李', '周', '吴', '郑', '王', ' ...

  4. Word 查找替换高级玩法系列之 -- 段首批量添加字符

    打开「查找和替换」输入框,按照下图操作: 更多查找替换高级玩法,参看:Word查找替换高级玩法系列 -- 目录篇 未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文)

  5. Word 查找替换高级玩法系列之 -- 把论文中的缩写词快速变成目录下边的注释表

    1. 前言 问题:Word写论文如何把文中的缩写快速转换成注释表? 原来样子: 想要的样子: 2. 步骤 使用查找替换高级用法,替换缩写顺序 选中所有文字 打开查找替换对话框,输入以下表达式: 替换后 ...

  6. maven 高级玩法

    maven 高级玩法 标签(空格分隔): maven 实用技巧 Maven 提速 多线程 # 用 4 个线程构建,以及根据 CPU 核数每个核分配 1 个线程进行构建 $ mvn -T 4 clean ...

  7. Word 查找替换高级玩法系列之 -- 查找文档中的叠字

    叠字,顾名思义,就是重复出现,叠加在一起的文字,多多少少.点点滴滴等都属于这类范畴.而当Word文档中出现这类文字的时候我们应该怎么鉴别呢?如何找到这些叠字? 李清照的<声声慢>一词相信大 ...

  8. 十五天精通WCF——第九天 高级玩法之自定义Behavior

    终于我又看完了二期爱情保卫战,太酸爽了,推荐链接:http://www.iqiyi.com/a_19rrgublqh.html?vfm=2008_aldbd,不多说,谁看谁入迷,下面言归正传, 看看这 ...

  9. windbg的高级玩法

    详见附件  jpg改zip

  10. 转 Oracle DBCA高级玩法:从模板选择、脚本调用到多租户

    但凡是学过Oracle的同学,对DBCA(Database Configuration Assistant, DBCA)都不会陌生,有了这个工具,使得创建数据库成为可能.而DBCA本身有图形和静默两种 ...

随机推荐

  1. maven中snapshot快照库和release发布库的区别和作用

    在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...

  2. Unable to open serial port /dev/ttyUSB0

    ubuntu12.04使用USB转串口时出现权限不够问题,如下 Unable to open serial port /dev/ttyUSB0 权限不够 解决办法: 通过增加udev规则来实现.步骤如 ...

  3. spring定时器 @Scheduled

    需要注意的几点: 1.spring的@Scheduled注解  需要写在实现上. 2. 定时器的任务方法不能有返回值(如果有返回值,spring初始化的时候会告诉你有个错误.需要设定一个proxyta ...

  4. HTTP 304 Response

    当一个客户端(通常是浏览器)向web服务器发送一个请求,如果web服务器返回304响应,则表示此请求的本地缓存是最新的,可以直接使用.这种方法可以节省带宽,避免重复响应. 一般来说,可以将一个请求分为 ...

  5. fork进程函数总结

    学习链接: http://blog.csdn.net/jason314/article/details/5640969 http://coolshell.cn/articles/7965.html 搜 ...

  6. xml跟sql查找

    xml小白笔记 ....... <sql id="wDishesColumns"> a.id AS "id", a.pid AS "pid ...

  7. Syncfusion HTMLUI研究一

    HTMLUI可以加载HTML页面,并且相比WebKit等占用资源特别少 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  8. .NETMVC小笔记

    .NETMVC如何不引用_Layout.chtml view文件夹里面有个_ViewStart.cshtml文件,打开可以看到 @{ Layout = "~/Views/Shared/_La ...

  9. python之ETL数据清洗案例源代码

    #python语言 import pandas as pd import time data = pd.read_excel('ETL_数据清洗挑战.xlsx','测试数据',dtype=str)#读 ...

  10. vim的几个插件mark.vim ctrlp.vim等

    开发过程中, 保证语义的前提下, 尽量使用 短的 变量名: 如: 用 $map来代替 $condition, 因为在书写长的变量名的时候, 容易写错, 而排查错误, 还不容易找出来. vim在浏览和排 ...