last-child可能你也会踩的坑
旧文章从语雀迁移过来，原日期为2021-07-14
问题
当时写在写一个列表，列表每一项需要下面加下划线，最后一项不加下划线。第一时间，想到使用 :``last-child 这个伪类来实现。
当时的代码出来的 HTML 片段大致是这样的（省略号代表还有其他元素）：
<div class="list-box">
<div class="list-item">...</div>
<div class="list-item">...</div>
<div class="list-item">...</div>
<!-- 最后两行是由vant的list组件添加的 -->
<div class="van-list__finished-text">沒有更多數據了</div>
<div class="van-list__placeholder"></div>
</div>
样式是这样的：
.list-item {
border-bottom: #eaeaea 1px solid;
}
.list-item:last-child {
border-bottom: 0;
}
然后一直没搞明白，为啥最后一行的底部还有下划线呢。
思考
于是我查了 last-child 的定义：
:last-childCSS 伪类 代表父元素的最后一个子元素。
这句定义的重点是元素。
然后我得到第一次的推断：只是通过 :list-item 来定位到父元素而已， :list-child 依然会在父元素上去找最后一个子元素
于是我有写了另外一个例子：
<style>
.list-box {
width: 200px;
}
.list-box .list-item {
background: red;
height: 100px;
}
.list-box div {
background: yellow;
height: 100px;
}
.list-box .list-item:last-child {
background: green;
}
</style>
<body>
<div class="list-box">
<div class="list-item">111</div>
<div class="list-item">222</div>
<div class="list-item">333</div>
<div>沒有更多數據了</div>
</div>
</body>
结果最后一个 div 并没有变绿，所以证明我得推测是错误的。
然后我又改变了例子，把最后一个样式修改为：
.list-box div:last-child {
background: green;
}
就生效了：
那就可以得出结论了：
对于样式 selector:last-child ，要想目标元素生效：既要满足 selector 选择器，还要是当前选择器的父元素最后一个元素。
**
last-child可能你也会踩的坑的更多相关文章
- 小程序canvas生成二维码图片踩的坑
1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...
- celery开发中踩的坑
celery开发中踩的坑 celery连接redis 当使用redis做broker,redis连接需要密码时: BROKER_URL='redis://:xxxxx@127.0.0.1:6379/0 ...
- 从零开始学 Java - Spring 支持 CORS 请求踩的坑
谁没掉进过几个大坑 记得好久之前,总能时不时在某个地方看到一些标语,往往都是上面一个伟人的头像,然后不管是不是他说的话,下面总是有看起来很政治正确且没卵用的屁话,我活到目前为止,最令我笑的肚子痛得是下 ...
- webuploader插件，我踩得坑
我在目前的公司做的项目要么是原生写法去做项目,要么就是vue+webpack做项目,但是vue这部分只是用了模板template,vue其他的都没用. 有一个项目需要做上传图片的功能,老大扔给我一个插 ...
- 谈谈调用腾讯云【OCR-通用印刷体识别】Api踩的坑
一.写在前面 最近做项目需要用到识别图片中文字的功能,本来用的Tesseract这个写的,不过效果不是很理想. 随后上网搜了一下OCR接口,就准备使用腾讯云.百度的OCR接口试一下效果.不过这个腾讯云 ...
- Asp.Net Core中使用Swagger，你不得不踩的坑
很久不来写blog了,换了新工作后很累,很忙.每天常态化加班到21点,偶尔还会到凌晨,加班很累,但这段时间,也确实学到了不少知识,今天这篇文章和大家分享一下:Asp.Net Core中使用Swagge ...
- python绘图踩的坑
踩的坑 pyecharts安装地图包 pip install echarts-countries-pypkg 报错Unknown or unsupported command 'install' 这可 ...
- 使用CCNode作为容器容易踩的坑
Cocos2dx中CCNode经常作为一个父容器,里面装一些UI控件,最后组成一个复杂的自定义的UI控件,但是在使用别人的自定义控件和自己写自定义问题的时候会踩一些坑. 首先拿到一个自定义的UI控件一 ...
- java基础不牢固容易踩的坑
java基础不牢固容易踩的坑 经过一年java后端代码以及对jdk源码阅读之后的总结,对java中一些基础中的容易忽略的东西写下来,给偏爱技术热爱开源的Coder们分享一下,避免在写代码中误入雷区. ...
- Ubuntu中安装FTP 服务器自己踩得坑
12点多了,擦!做个码农真不容易呀! 系统:Ubuntu16.04 安装:FTP 步骤: 1.不管有没有一上来我先卸载: sudo apt-get purge vsftpd 2.再安装:sudo ap ...
随机推荐
- HDU3001 Travelling （状压DP）
题目没有起点限制,且每个节点至少访问1次,最多访问2次,所以用三进制数表示节点的状态(选取情况). 因为三进制数的每一位是0或1或2,所以预处理z状态S的第j位的数是有必要的. 边界条件:dp[tri ...
- BinaryBombs（二进制炸弹实验）
实验介绍 使用所学知识拆除Binary Bombs来增强对程序的机器级表示.汇编语言.调试器和逆向工程等理解. Binary Bombs(二进制炸弹)是一个可执行程序,是C语言编译链接成的,包含pha ...
- 2022-08-20-nas寄了就搞网络__网络升级计划_(估计又得白给)
layout: post cid: 13 title: nas寄了就搞网络? 网络升级计划 (估计又得白给) slug: 13 date: 2022/08/20 16:31:00 updated: 2 ...
- 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层（页面代码将登录的用户名和密码存在cookie）,中间页面中存在一个超链接，单击超链接可以链接到第三个页面查看信息。若选择“
Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...
- python更改文件后缀名
path = '1024.png' extension = 'jpg' for i in range(1,len(path)): if (path[-i] == '.'):#找到后缀初始点 new_p ...
- ansible使用临时命令通过模块来执行任务
使用临时命令通过模块来执行任务 一.查看系统上安装的所有模块 ansible-doc -l 查看ping模块帮助文档 ansible-doc ping 1.ansible模块 文件模块: copy:将 ...
- Linux正则表达式与grep
bash是什么 bash是一个命令处理器,运行在文本窗口中,并能执行用户直接输入的命令 bash还能从文件中读取linxu命令,称之为脚本 bash支持通配符.管道.命令替换.条件判断等逻辑控制语句 ...
- SLAM中的内外点
内外点之分最简单的说法就是是否符合当前位姿的判断:如果根据当前位姿,之前帧二维特征点所恢复出的地图点重投影到当前帧与实际的二维特征点匹配不上了,那么认为这个是质量差的点是outlier,抛弃掉,如果能 ...
- CH58X服务修改
在对ble系列应用时,很多时候拿手机充当主机.在使用ble 调试助手时常会用到write.read.notify等功能.有时可能会根据自己的需求对这些服务进行修改.下图是官方例程体现出的service ...
- 使用LabVIEW实现基于pytorch的DeepLabv3图像语义分割
前言 今天我们一起来看一下如何使用LabVIEW实现语义分割. 一.什么是语义分割 图像语义分割(semantic segmentation),从字面意思上理解就是让计算机根据图像的语义来进行分割,例 ...