首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS中:nth-child的用法

    做前端一定要记住:nth-child(2)这个选择器,它可以帮你轻松选择你想要的标签并给与修改添加样式 下面通过几个例子说明,相信你一看就明白 li:nth-child(2){background:#090...} :nth-child(2)表示选取第几个标签,”2可以是你想要的数字” li:nth-child(n+4){background:#090} :nth-child(n+4)选取大于等于4标签,”n”...表示从整数 li:nth-child(-n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 li:nth-child(2n){background:#090}...:nth-child(2n)选取偶数标签,2n也可以是even li:nth-child(2n-1){background:#090} :nth-child(2n-1)选取奇数标签,2n-1可以是odd...li:nth-child(3n+1){background:#090} :nth-child(3n+1)自定义选取标签,3n+1表示”隔二取一” li:last-child{background:#090

    61110

    你了解css3的nth-child

    :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,借助这个特性,可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。...专注前端与算法的系列干货分享,转载请声明原创: 「微信公众号:心谭博客」| xxoo521.com | GitHub nth-child 介绍 :nth-child(n) 选择器匹配属于其父元素的第...(1) 用even/odd分别代表偶数 / 奇数:span:nth-child(even) 借助n自定义选择范围: nth-child(2n)/nth-child(2n + 1):偶数 / 奇数 nth-child...比如选择第 6 个到第 9 个,就是::nth-child(-n+9):nth-child(n+6) 注意:不是nth-child(2 - n),-n要写在一起! 子元素 !...所以在借助nth-child匹配子元素时,要看清楚 DOM 树的层级关系。

    72220

    CSS 选择器 nth-child 的几种用法

    举例,最后一行字体显示为绿色,代码如下: li:last-child{     color: green; } nth-child(n) nth-child(n):选择列表中的第 n 个标签。...举例:第三行字体显示为蓝色,代码如下: li:nth-child(3){     color: blue; } nth-child(odd) nth-child(odd):选择列表的奇数行。...举例,奇数行背景显示为灰色,代码如下: li:nth-child(odd){     background: #999; } 我们可以通过另外的方法选择奇数行,例如: nth-child(n+1) 、...代码如下: /*First*/ li:nth-child(n+1){     background: #999; } /*Second*/ li:nth-child(2n-1){     background...举例:前三行背景色设置为绿色,代码如下: li:nth-child(-n+3){     background: #2cae1d; } nth-child(n+n) nth-child(n+n):选择第

    4.1K00

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

    1、先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。...数字:最常见的使用方式,eg: :nth-child(1) 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。...3、主要思路: 运用less混合传参,参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。...有了思路之后,下面让我们看一下具体的代码实现 4、代码实现 以下只贴颜色处理的核心代码 .colorLine(@index, @startColor, @endColor) { .li-item:nth-child...(5n, rgba(148, 117, 247, 1), rgba(119, 83, 233, 1)); 4.1、代码说明: 通过Less混合传参,实现指定了下标是 1,2,3,4,5 的倍数的所有 li-item

    89200
    领券