css - 第 n 个 child : how to pick elements in groups of two

Question

假设我有一个这样的表:

 <div class="fc-slats">
  <table>
    <tbody>
      <tr>
        <td class="fc-widget-content fc-major">16</td>
        <td class="fc-widget-content fc-minor">16</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">18</td>
        <td class="fc-widget-content fc-minor">18</td>
      </tr>
    </tbody>
  </table>
  </div>

我希望第一个和第二个单元格具有一种颜色，第三个和第四个单元格具有另一种颜色，第五个和第六个单元格具有第一种颜色......换句话说，它是旧的奇偶交替配色方案，除了每组中有两个单元格。

我正在尝试使用 CSS 的 nth-child 选择器来做到这一点:

fc-slats td:nth-child(int(n/2)) {
  background-color: red;
}

但是我不知道“nth-child”选择器的公式到底应该怎么写。我想 CSS 不支持像 int 这样的数学函数，也不支持像 if...then 这样的条件语句，那么在那种情况下，我该如何实现呢？

编辑:为了简洁起见，我只是在此表中添加了 6 个单元格，但假设该表将具有任意长度；换句话说，我正在寻找一种“通用”解决方案。

Answer 1

您可以选择每四个 td连同其前一个 sibling nth-child(4n)和 nth-child(4n - 1) :

td {
  background: blue;
}

td:nth-child(4n), td:nth-child(4n - 1) {
  background: red;
}

 <div class="fc-slats">
  <table>
    <tbody>
      <tr>
        <td class="fc-widget-content fc-major">16</td>
        <td class="fc-widget-content fc-minor">16</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">18</td>
        <td class="fc-widget-content fc-minor">18</td>
      </tr>
    </tbody>
  </table>
  </div>