jquery - 定位容器内的目标2、3、6、7、10等

我不能破解这个。如何打这样的物品：
2、3、6、7、10等...是否有jQuery或CSS技巧？我只是想不通

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px;
  max-width: 200px;
  margin: auto;
}


.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
  background: green;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

最佳答案

您可以使用两个选择器来做到这一点：.container > div:nth-child(4n+2)和.container > div:nth-child(4n+3)：

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px;
  max-width: 200px;
  margin: auto;
}

.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
  background: green;
}

.container>div:nth-child(4n+2),
.container>div:nth-child(4n+3) {
  background: red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

关于jquery - 定位容器内的目标2、3、6、7、10等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49905012/