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

Question

我无法破解这个。如何打这样的元素: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>

Answer 1

您可以使用两个选择器来做到这一点:.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>