仅显示元素触摸的边框？

Question

现在我有这种情况。

现在一切都很好，但有可能增加更多课程。 包装器是flex类型，但是当前使用.div：nth-​​child（1）子2,3和4完成边框，因为每个元素都有不同的边框。所以问题是当添加新的时候我需要为它手动添加css。这不是一个问题，因为它会非常罕见，但它让我觉得有没有办法让这个过程自动生成？

首先有底部和右边，第二个有左下角，第三个有顶部和右边，第四个有左边和顶部

Answer 1

以下是使用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>

Answer 2

您可以获得此基本网格并根据您的需求进行调整（它只是一个基础）。基本的想法是这些线条实际上不是边界，它们是白色块下的彩色div的一部分。所以这样你不需要申请边界，我认为如果你有很多街区并且不想对每个边界应用边界，这是一个很好的解决方案。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.outer {
  background-color: red;
  height: 412px;
}

.wrapper {
  width: 100%;
  height: 100px;
  display: inline-block;
  background-color: red;
}

.item {
  height: 100px;
  width: calc(50% - 3px);
  display: inline-block;
  background-color: white;
}

.item + .item {
  margin-left: 2px;
}

＆＃13;

<div class="outer">
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>  
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>  
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以定义4个具有不同边框的类，并将它们应用于您的块。