如何使用 css nth-child(formula) select 偶数行中的所有项目

Question

我有几个项目在每行的 flex 容器 3 中对齐，如图所示。我如何 select 偶数行（第 2、4、. 行）中的所有项目。 ..) - 阴影项 - 使用 :nth-child 公式

例如，如果我想 select 第二列中的所有项目，我会做类似的事情：:nth-child(3n - 1)。但是我想不出 select 偶数行中所有项目的公式。

我想到了 :nth-child(3n + 1) 但它只会 select 每行的第一个项目。

编辑：对于那些需要一些 HTML 代码的人。

div.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgrey;
  padding: 16px;
  justify-content: space-between;
}

div.flex-container > div {
  display: flex;
  width: calc(95% / 3);
  height: 80px;
  background-color: indigo;
  margin: 16px 0;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
}

/*NOT WORKING. This is select all elements at even position. But I want to select all items in even rows*/
div.flex-container > div:nth-child(even) {
  background-color: purple;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>
  <div>7</div>
  <div>8</div>  
  <div>9</div>  
  <div>10</div>  
  <div>11</div>  
  <div>12</div>
  <div>13</div>
  <div>14</div>  
  <div>15</div>  
  <div>16</div>  
  <div>17</div>  
  <div>18</div>
</div>

编辑 2：我根据 Preetam Vishwakarma 的回答建议创建了这个片段：:nth-child(6n + 4)、:nth-child(6n + 5)、:nth-child(6n + 6)。可以更有活力吗？这仅适用于三列。我们可以在一个方程式中完成吗？

div.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgrey;
  padding: 16px;
  justify-content: space-between;
}

div.flex-container > div {
  display: flex;
  width: calc(95% / 3);
  height: 80px;
  background-color: indigo;
  margin: 16px 0;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  color: white;
}

/*Can it be **more dynamic**?. This will work only with a three-columns. Can we make it in a single equation?*/
div.flex-container > div:nth-child(6n + 4), div.flex-container > div:nth-child(6n + 5), div.flex-container > div:nth-child(6n + 6) {
  background-color: purple;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>
  <div>7</div>
  <div>8</div>  
  <div>9</div>  
  <div>10</div>  
  <div>11</div>  
  <div>12</div>
  <div>13</div>
  <div>14</div>  
  <div>15</div>  
  <div>16</div>  
  <div>17</div>  
  <div>18</div>
</div>

Answer 1

 :nth-child(6n + 4)
 :nth-child(6n + 5)
 :nth-child(6n + 6)

Answer 2

使用 :nth-child(even) 选择器。

如何使用 css nth-child(formula) select 偶数行中的所有项目

How to select all items in even rows using css nth-child(formula)

css

css-selectors