您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

CSS选取第几个标签元素的实现
发表:紫石头原创模板堂    发表时间:2019-06-26 10:21:31    阅读:63
    在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如果是静态代码,php就无法用了。这时,我们还可以通过CSS来实现,CSS给我们提供了几个非常有用的样式参数:first-child、last-child、nth-child(n)。下面,详细看一下它们的使用。
    1、first-child
    first-child表示选择列表中的第一个标签。代码如下:
    li:first-child{background:#090}
    上面的意思是,li 列表中的 第一个li模块的背景颜色。
    2、last-child
    last-child表示选择列表中的最后一个标签,代码如下:
    li:last-child{background:#090}
    3、nth-child(3)
    表示选择列表中的第3个标签,代码如下:
    li:nth-child(3){background:#090}
    上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。
    4、nth-child(2n)
    这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。
    5、nth-child(2n-1)
    这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。
    6、nth-child(n+3)
    这个表示选择列表中的标签从第3个开始到最后。
    7、nth-child(-n+3)
    这个表示选择列表中的标签从0到3,即小于3的标签。
    8、nth-last-child(3)
    这个表示选择列表中的倒数第3个标签。
    上面这些CSS样式是非常有用的,在我们的网页开发过程中,会派上非常大的用场,可以给我们的网页带来不一样的风格。
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照