Vue ul li 列表最后一个子元素 “不需要列表横线写法”

最新推荐文章于 2024-06-25 11:16:05 发布

dq_095

最新推荐文章于 2024-06-25 11:16:05 发布

阅读量4.5k

点赞数 2

分类专栏： Vue.js 文章标签：列表最后一项不需要样式

本文链接：https://blog.csdn.net/qq_37968920/article/details/81603534

版权

Vue.js 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

Vue里面 ul li 列表最后一个子元素 “不需要列表横线写法”

.block
   flex 1
    text-align center
    border-right 1px solid rgba(7,17,27,0.1) 
    &:last-child
        border-right 0px solid rgba(7,17,27,0.1)

重点在这里

    &:last-child
         border-right 0px solid rgba(7,17,27,0.1)

或

    &:last-child
         border-none()

border-none() ：是公用 .stly 里面的方法

html部分

    <ul class="remark">
          <li class="block">
              <h2>起送价</h2>
              <div class="content">
                  <span class="stress">{{seller.minPrice}}元</span>
              </div>
          </li>
          <li class="block">
              <h2>商家起送</h2>
              <div class="content">
                  <span class="stress">{{seller.deliveryPrice}}元</span>
              </div>
          </li>
          <li class="block">
              <h2>平均配送时间</h2>
              <div class="content">
                  <span class="stress">{{seller.deliveryTime}}分钟</span>
              </div>
          </li>

      </ul> 

    .remark
        .block
           flex 1
           text-align center
           border-right 1px solid rgba(7,17,27,0.1) 
           &:last-child
               border-right 0px solid rgba(7,17,27,0.1)