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