nth-child:如何以两个为一组选择元素

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及其前一个兄弟,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>