css判断dom是奇数就最后一个偶数就最后两个

在写移动端页面时碰到一个问题，设计图给的是这样的

如图，上面是一个块，分成四个，按设计图的意思是如果有数据可以往后面添加，并且每两个平行的为一组有一个底边框。
一开始也没想那么多，上手写的时候却发现了问题。后端给我的接口数据肯定是一个数组，不会像图片上给的二位数据，如果是二位数据的话，我就可以循环两次，每两个一组，直接下面给一个 border-bottom 就可以，但现实可没这么简单，问题是都是一位数组，所以说都是一次循环得出来的 DOM 是不可以做底部边框处理的。

下面是思考，可不可以设置特定 css 的项，给定一个底边框。假定，如果数据是单数，那么我们选择的伪类就应该这样写 &:nth-child(odd):nth-last-child(1) ，选择单数的时候在选择 DOM 的最后一个，然后我们继续给定选择的伪类 &:nth-child(even):nth-last-of-type(-n+2) ，选择双数的时候再选择 DOM 的最后两个。
理论上，上面的代码应该是没有问题的，但写出来发现出错了。
发现当我们出现有三条数据的时候，样式错位了。如下图：

尝试修改了一下，换了单双数的写法，把单数设置成最后两个，双数设置成最后一个，发现成功了。

最后的代码：

<div class="list-item" v-for="(picture, index) in componentData.pictures">
  <div class="list-content">
    <div class="list-wrap">
      <div class="list-tit">{{picture.title}}</div>
      <div class="list-des" :style="{ fontSize: componentData.style.descFontSize }">{{picture.desc}}</div>
    </div>
    <div class="list-img">
      <img class="img" :src="picture.src" />
    </div>
  </div>
</div>

.list-item
  padding: 15px 0
  border-bottom: 1px solid #f1f1f1
  &:nth-child(odd):nth-last-of-type(-n+2)
    border-bottom: none
  &:nth-child(even):nth-last-child(1)
    border-bottom: none
    .list-content
      &:before
        content: none
  &:last-child
    .list-content
      &:before
        content: none
    .list-content
      display: flex
      position: relative
      &:before
        content: ''
        position: absolute
        top: 0
        right: -15px
        width: 1px
        height: 100%
        background-color: #f1f1f1
      .list-img
        > img 
          display: block
          border-radius: 50%
      .list-wrap
        flex: 1
        padding-right: 10px
        .list-tit
          line-height: 1.2
          font-size: 14px
          ellipsis-line(1)
        .list-des
          margin-top: 5px
          color: #999999
          font-size: 12px
          line-height: 1.2
          ellipsis-line(2)