小程序: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><text
						class="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的解决办法，能明白其原因也很重要。

技术越分享越快乐 ~