微信小程序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;
}
//这样就可以完美找到最后一个元素~

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

分享海报

关于我

大胡子,男,生于1994年,河南洛阳人。

很多人对我的网名有误解,这里顺便解释一下,我姓胡,大胡子这个网名始于2013年,早期的一些网友管我叫胡子,然后我就给自己取了个网名叫「大胡子」,这里的「大」是长大了的意思。

自由职业者,8年WordPress网站开发经验,不善言辞,喜欢爬山、摄影,油泼面的粉丝,和很多人一样,包揽了生活中不同的角色和位置。

如果你有网站相关类的业务需求,可以联系我哦,期待与你的合作~