CSS技巧

最新推荐文章于 2022-12-22 14:33:02 发布

pous

最新推荐文章于 2022-12-22 14:33:02 发布

阅读量1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/P1Y2S3/article/details/127528242

版权

:not(:last-child)

:not(:first-child)顾名思义，not first就是不要第一个，所以它的作用是设置第一个以外的元素样式 :not(:last-child)同理，作用是设置除最后一个以外其他的元素样式

不需要最后一个元素的样式一般用在伪类元素里面

html:
            <div class="bao-box">
              <img :src="bg" alt="">
              <div class="item-list">
                <span v-for="(its,iden) in baoList" :key="iden">
                  {{its.title}}
                </span>
              </div>
            </div>
            
css:
        .bao-box {
          display: flex;
          align-items: center;
          height: 22px;
          padding-right: 5px;
          border: 1px solid #01a04b;
          border-radius: 3px;
          line-height: 22px;
          background: #f0fff3;
          padding-left: 5px;

          img {
            width: 77px;
            height: 16px;
          }

          .item-list {
            margin-left: 4px;
            color: #01a04b;

            span {
              position: relative;
              display: inline-block;
              margin-right: 15px;

              &:not(:last-child)::after {
                content: "";
                position: absolute;
                top: 4px;
                right: -7px;
                display: inline-block;
                width: 1px;
                height: 15px;
                background: #c8e9bd;
              }
            }

            :last-child {
              margin-right: 0;
            }
          }
        }