小程序:last-child选择器失效（及其解析）

今天，在修改小程序列表页的样式时发现了一个有意思的事，:last-child偶尔失效？刨根问底了一会，终于知晓。为了方便理解下面是代码和解析~
wxml:

//数据列表页
<view class="list-wrapper"><view wx:for="{{list}}" wx:key="index" class="list-item" >               <image class='item-image' src='{{item.icon}}'></image><text class="item-text">{{item.text}}</text><image class='item-array' src="{{toright}}"></image>               </view>
</view>
//详情页
<view class="page">......<view class="list-item"><text class="fS-13">手机号</text><text class="cr-Sgrey fS-14">{{staffobj.tel?staffobj.tel:'-'}}        </text></view><view class="list-item"><text class="fS-13">身份证号</text><text class="cr-Sgrey fS-14">{{staffobj.idCardNo?staffobj.idCardNo:'-'}}</text></view><view class="list-item"><text class="fS-13">录入权限</text><text class="cr-Sgrey fS-14">{{staffobj.isSales=='1'?'允许':staffobj.isSales=='0'?'未允许':'-'}}</text></view>
</view>

wxss:

.list-wrapper>.list-item {/* width: 100%; */padding: 6rpx 30rpx;min-height: 100rpx;border-bottom: 1rpx solid #eee;
}
.list-item:last-child{border:0;
}

通过:last-child匹配列表最后一行，使其边框为0。以上设置样式都是起作用的。下面代码是样式失效的：

wxml：

<view class="page"><view class="staffli" wx:for="{{stafflist}}" wx:key="index" data-item='{{item}}' bindtap="staffDetail"><image class='item-image' src="{{avaimg}}"></image><view class='textcon'><view class="textcon-1 d-bt0"><text class="fS-14 cr-33">{{item.clerkName?item.clerkName:'-'}}</text><textclass="fS-12 cr-87">{{item.tel?item.tel:'-'}}</text></view><view class="textcon-2 fS-12">入职时间：{{item.entryTime?item.entryTime:'-'}}</view></view></view><view class="btnfooter"><navigator url="../addstaff/addstaff" class="list-item" class="btnaa">新增员工</navigator></view>
</view>

wxss：

.staffli{width: 100%;height: 150rpx;line-height: 150rpx;display: flex;align-items: center;background: #fff;border-bottom: 2rpx solid #f5f5f5;
}
.staffli:last-child{border:0;
}

此时使用:last-child选择器定义样式是失效的，搜了一下有很多博客写因为.staffli 下方还有同级元素，wx:for(.staffli)的外层包一层view就可以了。试了一下有效果。于是搜了搜:last-child选择器的匹配原则，

**el:last-child 匹配顺序：**第一，查找el 其父级的所有同级子元素（如jQuery的siblings）；第二，在同级元素中找到最后一个元素；第三，校验最后一个元素是否和el一致。

看了它的匹配顺序才明白为什么:last-child失效的原因，不仅找到Bug的解决办法，能明白其原因也很重要。: 技术越分享越快乐 ~

小程序:last-child选择器失效（及其解析）相关推荐

小程序对文件及后缀名解析
小程序对文件及后缀名解析引用微信开放平台文档 1.后缀: 1.1.WXSS: 样式文件(类似CSS) WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 新增了尺寸单位 ...
社区团购小程序怎么做，全流程解析
在当前的电商市场中,社区团购已经成为了一股强劲的力量.社区团购小程序作为社区团购的重要组成部分,已经成为了商家和消费者不可或缺的工具.社区团购小程序以其方便.快捷.实惠的特点,受到越来越多的用户的青睐 ...
关于小程序的bindscrolltolower事件失效，已解决
公司最近在开发一款小程序,我也是刚上手,坑挺多的,特意来记录一下. 关于微信小程序的bindscrolltolower事件失效,我贴一下第一次写的代码. 这样使用bindscrolltolower 事 ...
解决微信小程序video属性controls失效问题
解决微信小程序video属性controls失效问题参考文章: (1)解决微信小程序video属性controls失效问题 (2)https://www.cnblogs.com/lguow/p/92 ...
关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题
前言在 Vue 和 uni-app 的使用过程中,我们常使用到 v-show 与 v-if .但很多人在用时并不知道两者到底有什么区别,下面就由我来介绍下吧一.v-show v-show 是一个根 ...
关于小程序中点击事件失效问题总结
关于小程序中点击事件失效问题总结 handleItemTap(e){//获取suoyinconst {index}=e.currentTarget.dataset; //相当于const index ...
微信小程序first-child 和 last-child 失效,设置后不起作用~
微信小程序first-child 和 last-child 失效,设置后不起作用~ 问题:在不确定有多少个子项的前提下,需要给最后一个子项添加一个样式. 使用了last-child不生效. 解决办法: ...
独立系统去水印小程序源码-无授权+去水印解析接口
独立系统去水印小程序源码-无授权+去水印解析接口给大家分享一个独立去水印小程序源码. 内带一个去水印解析接口,当我发出来之后他就是一个不稳定的共享接口了这款是自己买的无授权随意搭建,里面数据库 ...
小程序字体真机失效解决
微信小程序字体真机失效解决 uniapp 微信小程序字体加载 1.使用 uni.loadFontFace uni.loadFontFace({global: true, // 开启全局生效family ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...

小程序:last-child选择器失效（及其解析）

小程序:last-child选择器失效（及其解析）相关推荐

最新文章

热门文章