:last-child选择器不起作用

1. 同级唯一, :last-child生效:

<view class="">
    <view class="cell" v-for="(item,index) in 5">你好,我有一个帽衫</view>
</view>

// 设置 Css
.cell:last-child {
    background: pink;
}

WechatIMG341.jpg

2. 同级多个且不是最后一个, :last-child失效 :

<view class="">
      <view class="cell" v-for="(item,index) in 5">你好,我有一个帽衫</view>
      <view class="">我是毛衣,不是帽衫</view>
</view>

// 设置 Css
.cell:last-child {
    background: pink;
}

WechatIMG342.jpg

3. 同级多个且是最后一个, :last-child生效 :

<view class="">
      <view class="">我是毛衣,不是帽衫</view>
      <view class="cell" v-for="(item,index) in 5">你好,我有一个帽衫</view>
</view>

// 设置 Css
.cell:last-child {
    background: pink;
}

WechatIMG343.jpg

通过上面的案例可得, 设置 :last-child 的时候,该控件必须在同级别中最后一个或唯一一个时,才会生效.