last-child为啥不生效

last-child基本定义

指定属于其父元素的最后一个子元素的 p 元素的背景色

如果你这样写是不会生效的

           <div class="limit-border">
                <div class="text">text</div>
                <div v-for = "(item,index) in provideList" :key="index" style="height:1.5rem;padding-top:.2rem;" class="limit-top" @click="toSupplierDetail(item.supplierId)">
                  <div style="line-height:0.5rem;margin-top: .2rem;" class="limit-long  get-black-color">{{item.name}}</div>
                  <div style="color:rgb(173, 173, 173);font-size:12px;line-height:0.8rem" class="limit-long get-grey-color" >{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
                </div>
            </div>

css如下

.limit-top{
border:1px solid red
}
.limit-top:last-child{
  border none
}

原因是相同的limit-top类名的同级不能再有其他的标签元素,去掉class为text的就好了,也就是父元素底下只能有class为limit-top的列表才可以,如果你遇到这个问题,直接列表外面包一个div就好了

正确template如下

           <div class="limit-border">
                <div v-for = "(item,index) in provideList" :key="index" style="height:1.5rem;padding-top:.2rem;" class="limit-top" @click="toSupplierDetail(item.supplierId)">
                  <div style="line-height:0.5rem;margin-top: .2rem;" class="limit-long  get-black-color">{{item.name}}</div>
                  <div style="color:rgb(173, 173, 173);font-size:12px;line-height:0.8rem" class="limit-long get-grey-color" >{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
                </div>
            </div>

css不变