旧文章从语雀迁移过来，原日期为2021-07-14

问题

当时写在写一个列表，列表每一项需要下面加下划线，最后一项不加下划线。第一时间，想到使用 :``last-child 这个伪类来实现。

当时的代码出来的 HTML 片段大致是这样的（省略号代表还有其他元素）：

  1. <div class="list-box">
  2. 	<div class="list-item">...</div>
  3.   <div class="list-item">...</div>
  4.   <div class="list-item">...</div>
  5.   <!-- 最后两行是由vant的list组件添加的 -->
  6.   <div class="van-list__finished-text">沒有更多數據了</div>
  7.   <div class="van-list__placeholder"></div>
  8. </div>

样式是这样的：

  1. .list-item {
  2.     border-bottom: #eaeaea 1px solid;
  3. }
  4. .list-item:last-child {
  5.     border-bottom: 0;
  6. }

然后一直没搞明白，为啥最后一行的底部还有下划线呢。

思考

于是我查了 last-child 的定义：

:last-child CSS 伪类 代表父元素的最后一个子元素。

这句定义的重点是元素。

然后我得到第一次的推断：只是通过 :list-item 来定位到父元素而已， :list-child 依然会在父元素上去找最后一个子元素

于是我有写了另外一个例子：

  1. <style>
  2.   .list-box {
  3.     width: 200px;
  4.   }
  6.   .list-box .list-item {
  7.     background: red;
  8.     height: 100px;
  9.   }
  11.   .list-box div {
  12.     background: yellow;
  13.     height: 100px;
  14.   }
  16.   .list-box .list-item:last-child {
  17.     background: green;
  18.   }
  19. </style>
  20. <body>
  21.   <div class="list-box">
  22.     <div class="list-item">111</div>
  23.     <div class="list-item">222</div>
  24.     <div class="list-item">333</div>
  25.     <div>沒有更多數據了</div>
  26.   </div>
  27. </body>

结果最后一个 div 并没有变绿，所以证明我得推测是错误的。



然后我又改变了例子，把最后一个样式修改为：


  2. .list-box div:last-child {
  3.     background: green;
  4.  }

就生效了：



那就可以得出结论了：

对于样式 selector:last-child ，要想目标元素生效：既要满足 selector 选择器，还要是当前选择器的父元素最后一个元素。

**

last-child可能你也会踩的坑的更多相关文章

  1. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  2. celery开发中踩的坑

    celery开发中踩的坑 celery连接redis 当使用redis做broker,redis连接需要密码时: BROKER_URL='redis://:xxxxx@127.0.0.1:6379/0 ...

  3. 从零开始学 Java - Spring 支持 CORS 请求踩的坑

    谁没掉进过几个大坑 记得好久之前,总能时不时在某个地方看到一些标语,往往都是上面一个伟人的头像,然后不管是不是他说的话,下面总是有看起来很政治正确且没卵用的屁话,我活到目前为止,最令我笑的肚子痛得是下 ...

  4. webuploader插件，我踩得坑

    我在目前的公司做的项目要么是原生写法去做项目,要么就是vue+webpack做项目,但是vue这部分只是用了模板template,vue其他的都没用. 有一个项目需要做上传图片的功能,老大扔给我一个插 ...

  5. 谈谈调用腾讯云【OCR-通用印刷体识别】Api踩的坑

    一.写在前面 最近做项目需要用到识别图片中文字的功能,本来用的Tesseract这个写的,不过效果不是很理想. 随后上网搜了一下OCR接口,就准备使用腾讯云.百度的OCR接口试一下效果.不过这个腾讯云 ...

  6. Asp.Net Core中使用Swagger，你不得不踩的坑

    很久不来写blog了,换了新工作后很累,很忙.每天常态化加班到21点,偶尔还会到凌晨,加班很累,但这段时间,也确实学到了不少知识,今天这篇文章和大家分享一下:Asp.Net Core中使用Swagge ...

  7. python绘图踩的坑

    踩的坑 pyecharts安装地图包 pip install echarts-countries-pypkg 报错Unknown or unsupported command 'install' 这可 ...

  8. 使用CCNode作为容器容易踩的坑

    Cocos2dx中CCNode经常作为一个父容器,里面装一些UI控件,最后组成一个复杂的自定义的UI控件,但是在使用别人的自定义控件和自己写自定义问题的时候会踩一些坑. 首先拿到一个自定义的UI控件一 ...

  9. java基础不牢固容易踩的坑

    java基础不牢固容易踩的坑 经过一年java后端代码以及对jdk源码阅读之后的总结,对java中一些基础中的容易忽略的东西写下来,给偏爱技术热爱开源的Coder们分享一下,避免在写代码中误入雷区. ...

  10. Ubuntu中安装FTP 服务器自己踩得坑

    12点多了,擦!做个码农真不容易呀! 系统:Ubuntu16.04 安装:FTP 步骤: 1.不管有没有一上来我先卸载: sudo apt-get purge vsftpd 2.再安装:sudo ap ...

随机推荐

  1. [题解] LOJ 3300 洛谷 P6620 [省选联考 2020 A 卷] 组合数问题 数学，第二类斯特林数，下降幂

    题目 题目里要求的是: \[\sum_{k=0}^n f(k) \times X^k \times \binom nk \] 这里面出现了给定的多项式,还有组合数,这种题目的套路就是先把给定的普通多项 ...

  2. BZOJ2654 tree （wqs二分）

    题目描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解.   一个最小生成树问题,但是我们要选need条白边,我们用g(i)表示选取i条 ...

  3. 第三方库openPyxl读取excel文件

    import openpyxl from openpyxl.worksheet.worksheet import Worksheet def openpyxl_read(): #1.打开文件 work ...

  4. 基于YOLO和PSPNet的目标检测与语义分割系统(python)

    基于YOLO和PSPNet的目标检测与语义分割系统 源代码地址 概述 这是我的本科毕业设计 它的主要功能是通过YOLOv5进行目标检测,并使用PSPNet进行语义分割. 本项目YOLOv5部分代码基于 ...

  5. 测试架构师CAP原理（最简单）

    测试架构师CAP原理(最简单) 很多人都不是很了解CAP理论,其实CAP很简单,不要想复杂了! C:一致性,就是数据一致性,就是数据不出错! A:可用性,就是说速度快,不延迟,无论请求成功失败都很快返 ...

  6. Java多线程（5）：CAS

    您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 在JDK1.5之前,Java的多线程都是靠synchronized来保证同步的,这会引起很多性能问题,例如死锁.但随着Java的不断完善,JNI ...

  7. Python基础之函数：3、多层语法糖、装饰器和装饰器修复技术及递归函数

    目录 一.多层语法糖 1.什么是多层语法糖: 2.多层语法糖用法: 二.有参装饰器 1.什么是有参装饰器: 2.有参装饰器的作用: 三.装饰器修复技术 1.什么是装饰器修复技术: 四.递归函数 1.什 ...

  8. django-environ学习

    官方说明:https://django-environ.readthedocs.io/en/latest/index.html install pip install django-environ q ...

  9. docker清空网络配置

    docker 网络 故障 相同的 ip 绑定给了 两个 网卡, 需要 清空 网络 ip addr | grep 10.79 inet 10.79.106.1/24 brd 10.79.106.255 ...

  10. Windows版CheatSheet——一键显示当前程序快捷键列表

    Windows系统上的各种软件有太多的快捷键,想要记住是几乎不可能的,推荐一个一键显示当前软件快捷键的软件,在使用其他程序的时候,只要按下Ctrl+`就可以理解弹出该软件的所有快捷键列表,还支持收藏功 ...