css选择最后一个元素

在项目中遇到了最后一个元素需要不同样式的情况，然后使用: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就可以了