微信小程序first-child 和 last-child 失效,设置后不起作用

最近在帮朋友做一个招聘类的小程序,初次接触,真的是非常头大,要查阅很多资料,今天就遇到了一个问题,使用last-child获取不到最后一个class元素。

解决方法就是在外层再包裹一个父级元素,就好像li上层的ul一样。

下面给一段示例代码

//wxml
<view class="box">
  <view class="item">
    文章一
  </view>
  <view class="item">
    文章二
  </view>
  <view class="item">
    文章三
  </view>
  <view class="item">
    文章四
  </view>
</view>

//wxss
.item:last-child{
    border-bottom: 1rpx solid #333;
}
//上面的代码,使用last-child根本无效

//解决办法:给1楼和4楼中间包一个父元素
<view class="box">
  <view>
    <view class="item">
      文章一
    </view>
    <view class="item">
      文章二
    </view>
    <view class="item">
      文章三
    </view>
    <view class="item">
      文章四
    </view>
  </view>
</view>

//wxss
.item:last-child{
    border-bottom: 1rpx solid #333;
}
//这样就可以完美找到最后一个元素~

初次接触,如有错误之处,欢迎指正。

分享海报