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不變