css中:last-child不生效的解决方法

[c++]代码库

<template>
  <div class="root-container">
    <div class="father">
      <div class="child" v-for="item in 10" :key="item">
        一共10个元素，我是第{{item}}个
        <template v-if="item== 10">（css控制我的颜色）</template>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.father {
  width: 500px;
  border: 1px solid #b2b6b6;
  text-align: center;
  .child {
    padding: 10px 0;
    &:last-child {
      color: red;
    }
  }
}
</style>
<template>
  <div class="root-container">
    <div class="father">
      <div class="child" v-for="item in 10" :key="item">
        一共10个元素，我是第{{item}}个
        <template v-if="item== 10">（css控制我的颜色）</template>
      </div>
      <p>我是多余的元素</p>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.father {
  width: 500px;
  border: 1px solid #b2b6b6;
  text-align: center;
  .child {
    padding: 10px 0;
    &:last-child {
      color: red;
    }
  }
}
</style>