澳门六星彩资料-澳门2020年三合开奖结果-澳门三合图正版 今晚

密通学院

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
查看: 65|回复: 0
打印 上一主题 下一主题

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

[复制链接]
  • TA的每日心情
    可爱
    2018-6-29 10:04
  • 243

    主题

    259

    帖子

    6万

    铜板

    超级版主

    Rank: 8Rank: 8

    积分
    65202
    跳转到指定楼层
    楼主
    发表于 2020-4-1 17:27:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    在开发过程中,会碰到一些选择器的需求:

    例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . .  等等。

    我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个样式参数:first-child、last-child、nth-child(n)。

    下面介绍它们的使用方法:

    first-child first-child:选择列表中的第一个标签。

    举例:第一行字体显示为红色,代码如下:

    li:first-child{
        color: red;
    }
    last-child last-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) 、 nth-child(2n-1) 等。

    代码如下:

    /*First*/
    li:nth-child(n+1){
        background: #999;
    }
    /*Second*/
    li:nth-child(2n-1){
        background: #999;
    }
    nth-child(even) nth-child(even):选择列表的偶数行。

    举例:偶数行背景显示为土黄色(不要在意那些细节),代码如下:

    li:nth-child(even){
        background: #F6E0AF;
    }
    同样,我们可以通过另外的方法选择奇数行,例如: nth-child(2n) 。

    代码如下:

    li:nth-child(2n){
        background: #F6E0AF;
    }
    上面的几种方法运行效果如下图:

    CSS 选择器 nth-child 的几种用法 HTML笔记 第1张

    上面是几种比较常见的选择方法,我们还可以通过 CSS 更灵活的进行选择,有下面几种方法:

    nth-child(-n+n) nth-child(-n+n):选择第 n 个之前的元素(此处的 n 是后面的那个,下同)。

    举例:前三行背景色设置为绿色,代码如下:

    li:nth-child(-n+3){
        background: #2cae1d;
    }
    nth-child(n+n) nth-child(n+n):选择第 n 个之后的元素。

    举例:第五行及以后背景色设置为蓝色,代码如下:

    li:nth-child(n+5){
        background: #0ab1fc;
    }
    nth-last-child(n) nth-last-child(n):选择倒数第 n 个元素。

    举例:倒数第三元素字体设置为红色,代码如下:

    li:nth-last-child(3){
        color: red;
    }
    同样可以使用上面的方法进行拓展,方法如下:

    nth-last-child(n+n) nth-last-child(n+n):选择倒数第 n 个之前的元素。

    举例:倒数第三个及之前的元素字体设置为粗体,代码如下:

    li:nth-last-child(n+3){
        font-weight: bold;
    }
    上面的几种方法运行效果如下图:

    CSS 选择器 nth-child 的几种用法 HTML笔记 第2张

    nth-last-child(3n) nth-last-child(3n):选择第 3、6、. . .  个元素,选择三的倍数。

    举例:第3、6、 . . .  三的倍数行背景色设置为橙色,代码如下:

    li:nth-child(3n){
        background: orange;
    }
    nth-last-child(3n+1) nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个开始每个递增三个。

    举例:第1、4、7 . . .  行背景色设置为红色,代码如下:

    li:nth-child(3n+1){
        background: red;
    }
    上面的几种方法运行效果如下图:

    CSS 选择器 nth-child 的几种用法 HTML笔记 第3张



    当然,可能还有更多的使用方法,我在这只是简单的记录一下我常用的几种,也希望大家能够举一反三,能在项目中更好的利用起来。

    如果您有业务需求,可以和我联系:
    快速回复: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 感恩
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    澳门六星彩资料-澳门2020年三合开奖结果-澳门三合图正版 今晚|Archiver|手机版|小黑屋|密通学院:专业网络营销服务商

    GMT+8, 2020-5-21 16:29 , Processed in 0.163086 second(s), 26 queries ()

    Powered by XMT Inc. © 2015-2021 ArrayV1.0

    系统运营:

    快速回复 返回顶部 返回列表