CSS を使用してサブ要素に応じて異なるスタイルを記述する方法

div {
    &:最後の子:n番目の子(1) {
      // 関連スタイル}
}

div{
    &:n番目の最後の子(2):n番目の子(2) {
    
    }
}

     <div class="box" v-for="(item,index) リスト内" :key="index">
          <div class="header">
            <img :src="item.userImage" alt="">
            <span>{{アイテム名}}</span>
          </div>
          <div class="content">
            <img :src="v" alt="" v-for="(v, i) in item.imageUrl" :key="i">
          </div>
          <div class="bottom">
            <span class="left-icon">{{item.createTime}}</span>
            <div class="right">
              <img src="./img/6.1.png" alt="">
              <span>{{item.fabulousNumber}}</span>
            </div>
          </div>
        </div>

。箱 {
      パディング: 0.26rem;

      .ヘッダー{
        ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。

        画像 {
          幅: 0.58rem;
          高さ: 0.58rem;
          右マージン: 0.17rem;
        }
      }

      。底 {
        ディスプレイ: フレックス;
        コンテンツの両端揃え: スペースの間;
        アイテムの位置を中央揃えにします。
        色: #999999;
        フォントサイズ: 0.17rem;

        画像 {
          幅: 0.17rem;
          高さ: 0.17rem;
        }
      }

      。コンテンツ {
        ディスプレイ: フレックス;
        マージン: 0.17rem 0;

        画像 {
          フレックス: 1;
          高さ：1.37rem;
          幅: 0;
          右マージン: 0.09rem;
          &:最後の子 {
            右マージン: 0;
          }
          &:最後の子:n番目の子(1) {
            高さ：2.75rem;
          }
        }
      }
    }