页面循环列表，但是css设置last-child不生效

原代码写法不生效

html：

<view class="item_middleBox" v-for="(item,index) in list" :key="index">
      <view class="middleBox_info">{{ item.name }}</view>
</view>

css：

.item_middleBox{
   margin-bottom:20upx;
   &:last-child{
     margin-bottom:36upx;
  }
}

更改后---------------------------------------

html：

<view class="item_middleBox_Surrounded">
    <view class="item_middleBox" v-for="(item,index) in list" :key="index">
      <view class="middleBox_info">{{ item.name }}</view>
    </view>
</view>

css：

.item_middleBox_Surrounded{
  .item_middleBox{
     margin-bottom:20upx;
     &:last-child{
       margin-bottom:36upx;
    }
  }
}

因为item_middleBox包裹的不仅仅只有.item，还有.last-child，而.item .last-child是在同一个父级的作用下，这样不同的在一个父级下就无法找到，所以需要把.item_middleBox包裹一个父级