CSS技巧

最新推荐文章于 2023-05-04 08:14:43 发布

原创最新推荐文章于 2023-05-04 08:14:43 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

博客介绍了 CSS 中 :not(:last-child) 和 :not(:first-child) 选择器的作用。:not(:first-child) 用于设置第一个以外元素的样式，:not(:last-child) 用于设置除最后一个以外元素的样式，且不需要最后一个元素样式时常用在伪类元素里。

: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;
            }
          }
        }