css兄弟选择器

想要实现循环遍历的数据下面，每行添加虚线，最后一行不要，一行四组数据，显示效果如下

无论最后一行有几组数据，都不显示虚线，首先html样式结构 

<div class="list-box">
      <div class="app-box">
        标题名称1
      </div>
      <div class="app-box">
        标题名称2
      </div>
      <div class="app-box">
        标题名称3
      </div>
      <div class="app-box">
        标题名称4
      </div>
      <div class="app-box">
        标题名称5
      </div>
      <div class="app-box">
        标题名称6
      </div>
      <div class="app-box">
        标题名称7
      </div>
      <div class="app-box">
        标题名称8
      </div>
      <div class="app-box">
        标题名称9
      </div>
      <!-- <div class="app-box">
        标题名称10
      </div> -->
      <!-- <div class="app-box">
        标题名称11
      </div> -->
      <!-- <div class="app-box">
        标题名称12
      </div> -->
    </div>

然后设置css样式

.list-box{
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}
.app-box{
  color: #333;
  font-weight: bold;
  width: 200px;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px dashed #006EE2;
}
.app-box:nth-child(4n + 1):nth-last-child(-n + 4),
.app-box:nth-child(4n + 1):nth-last-child(-n + 4) ~ .app-box {
  border: none;
}

利用nth-child、nth-last-child和兄弟选择器，判断正数4的倍数加一（4n+1）且是倒数第一个到第四个（-n+4）和该项后面所有的兄弟元素特别设置border：none

:nth-child(4n+1)  代表从第4的倍数加一个到最后一个

:nth-last-child(3n) 代表3的倍数

:nth-child(-n+4) 代表从第一个到第四个

:nth-last-child(-n+4) 代表倒数第一个到倒数第四个

兄弟选择器"~"和"+"：‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。