Css 没有双边框或间隙的同级元素的边框

我需要实现正常的无限列表布局，每个项目周围都有一个边框。我不想看到两个元素的边界在哪里相交。由于

：last child

的行为，父元素仅将最后一个元素视为最后一个子元素，因此我尝试并卡住了

HTML

<div class="parent">
  <div class="child">
    <span>Has proper border</span>
  </div>
  <div class="child">
    <span>Not proper border</span>
  </div>
  <p>I introduced border issue</p> <!-- Can't remove this tag -->
</div>

---

我在CSS（和）和SCSS（）中阅读了一些关于同级选择器的文章/问题，并应用了以下选项以实现保持相同HTML的预期行为-

1。相邻同级选择器（“+”）方法-

2。“：最后一种”方法-

// Same can be achieved using ":first-of-type"
.parent {
  /* :last-of-type approach */
  margin 15px 0;
  span {
    border: 1px solid black;
    border-bottom-width: 0;
  }
  .child:last-of-type {
    span {
      border-bottom-width: 1px;
    }
  }
}

// Equivalent CSS
.parent .child:last-of-type span {
  border-bottom-width: 1px;
}

---

：类型的最后一个不适用于类名，仅适用于元素（div、p等）

.parent {
  /* siblings approach */
  margin: 15px 0;
  $className: child;
  .#{ $className } {
    & + .#{ $className } {
      span {
        border-top-width: 0;
      }
    }
  }
}

// Equivalent CSS - 
.parent .child + child span {
  border-top-width: 0;
}

// Same can be achieved using ":first-of-type"
.parent {
  /* :last-of-type approach */
  margin 15px 0;
  span {
    border: 1px solid black;
    border-bottom-width: 0;
  }
  .child:last-of-type {
    span {
      border-bottom-width: 1px;
    }
  }
}

// Equivalent CSS
.parent .child:last-of-type span {
  border-bottom-width: 1px;
}