表中行的不同颜色

Question

只能通过表格CSS样式创建这样的东西吗？ 我可以为偶数行和奇数行创建不同的颜色，但我想创建它（只是颜色）：

Answer 1

假设行数不变，您可以使用nth-of-type，nth-last-of-type或nth-child选择器加上公式，以使着色工作。此示例还需要通过按特定顺序放置规则集来使用选择器特异性：http://jsfiddle.net/se4Lwt1y/。

HTML：

<table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <tr><td>Row 5</td></tr>
    <tr><td>Row 6</td></tr>
    <tr><td>Row 7</td></tr>
    <tr><td>Row 8</td></tr>
    <tr><td>Row 9</td></tr>
    <tr><td>Row 10</td></tr>
    <tr><td>Row 11</td></tr>
    <tr><td>Row 12</td></tr>
    <tr><td>Row 13</td></tr>
    <tr><td>Row 14</td></tr>
    <tr><td>Row 15</td></tr>
    <tr><td>Row 16</td></tr>
    <tr><td>Row 17</td></tr>
    <tr><td>Row 18</td></tr>
    <tr><td>Row 19</td></tr>
    <tr><td>Row 20</td></tr>
    <tr><td>Row 21</td></tr>
</table>

CSS：

table {
    width: 100%;
}

table tr:nth-of-type(-n + 11) {
    background-color: hsla(60, 70%, 70%, 1);
}

table tr:nth-of-type(-n + 3) {
    background-color: hsla(0, 0%, 70%, 1);
}

table tr:nth-last-of-type(-n + 11) {
    background-color: hsla(200, 50%, 70%, 1);
}

table tr:nth-last-of-type(-n + 4) {
    background-color: hsla(200, 50%, 60%, 1);
}