jquery - 仅在元素接触的地方显示边框？

所以现在我有这种情况。



现在一切都很好，但是有可能添加更多的课程。
包装器是flex类型的，但是边框当前使用.div：nth-​​child（1）的孩子2、3和4完成，因为每个元素都有不同的边框。所以问题是当添加新的时，我需要为其手动添加css。这不是一个问题，因为它很少见，但是让我思考是否有一种方法可以自动进行该过程？

第一具有底部和右侧，第二具有左侧和底部，第三具有顶部和右侧，第四具有左侧和顶部

最佳答案

这是使用nth-child选择器的一种方法。测试以下4、5、6和7项。

.courses {
  display: flex;
  flex-wrap: wrap;
}

.course {
  /* everything gets a border bottom */
  border-bottom: 2px solid #faca28;
  box-sizing: border-box;
  width: 50%;
}

/* left items get a right border */
.course:nth-child(odd) {
  border-right: 2px solid #faca28;
}

/* no border bottom on the last one */
.course:nth-last-of-type(1) {
  border-bottom: 0;
}

/* no border bottom on the second to last one IF it's odd.*/
.course:nth-last-of-type(2):nth-child(odd) {
  border-bottom: 0;
}


/* demo only */
.courses {
  color: #555;
  margin-bottom: 100px;
  font: 1.5rem sans-serif;
}
.course {
  text-align: center;
  padding: 50px;
}

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>

<div class="courses">
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
  <div class="course">Course listing</div>
</div>