zoukankan      html  css  js  c++  java
  • 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不变

  • 相关阅读:
    MVC中使用jquery的浏览器缓存问题
    3 工厂方法模式
    2 简单工厂模式
    1 单例模式
    Sqlserver With as
    Memcache的使用
    mysql的分区和分表
    MySQL主从复制与读写分离
    SqlServer 表分区
    SqlServer 2012 AlwaysOn
  • 原文地址:https://www.cnblogs.com/antyhouse/p/10137165.html
Copyright © 2011-2022 走看看