记录组的 CSS 更改背景(不是备用)

Question

我有一个表格，我需要前 4 条记录具有相同的背景颜色。

示例:前 4 条记录的背景均为黄色。

我需要接下来的 4 条记录都具有蓝色背景。因此，以下 4 个将是黄色。

我不知道如何使用 tr:nth-of-type 对多条记录进行分组。

我可以获取替代项，但是我无法获取多条记录的背景颜色。

建议？

Answer 1

http://cssdeck.com/labs/i8zohrrs

tr:nth-child(8n+1),
tr:nth-child(8n+2),
tr:nth-child(8n+3),
tr:nth-child(8n+4) {
  background: yellow;
}

如果您以这种方式为行着色是因为它们具有某种关系，那么将它们包装在 tbody 标记中可能会更好:

http://codepen.io/cimmanon/pen/KqoCs

tbody:nth-child(odd) {
  background: #CCC;
}

<table>
    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>