在项目中遇到了最后一个元素需要不同样式的情况,然后使用:last-child来选择,但是并没有起效
<div v-for="(item, index) in gzhArticleData" :key="index" class="articleItem">
<div v-if="index == 0" class="firstArticle">
<div class="title">
<p>{{ item. title }}</p>
</div>
</div>
<div v-else class="normalArticle">
<div class="img">
<img v-if="item.img" :src="item.img">
</div>
</div>
</div>
<div v-if="gzhArticleData.length < 8" class="addBlock" @click="addArticle">
<i class="el-icon-plus"></i>
新建消息
</div>
.articleItem:last-child .title{
position: unset;
}
.articleItem:last-child .title::after{
bottom: 0px;
width: calc( 100% - 24px );
}
查询后得知,.articleItem:last-child起效需要两个条件
- 元素有.articleItem类
- 该元素必须是父元素下的最后一个元素
而我的项目中不满足第二个条件,所以不生效,在外面在包一个div就可以了