html - 用 n 种颜色为表中的行着色

Question

我知道我可以使用 odd 和 even 为表格中的交替行着色。但是，我希望能够为每 第三 行着色，所以着色就像红-绿-蓝-红-绿-蓝。

此外，我想将其通用化并使用 n 种颜色来设置每第 n 行的样式。

目前，我动态生成表格，对于每次迭代，我在每个 td< 上输入类名，如 modulo0、modulo1 等/em> 标签。

有没有更好的方法？一个更自动的魔法，那就是。

Answer 1

您想将:nth-child 选择器与3n 一起使用，可以在此处添加一个数字以获取从开始开始的每一秒，第二个或第三个。

jsFiddle

HTML

<table>
    <tr><td>R</td></tr>
    <tr><td>G</td></tr>
    <tr><td>B</td></tr>
    <tr><td>R</td></tr>
    <tr><td>G</td></tr>
    <tr><td>B</td></tr>
</table>

CSS

tr:nth-child(3n+1) td { 
    background-color:red;
}
tr:nth-child(3n+2) td { 
    background-color:green;
}
tr:nth-child(3n) td { 
    background-color:blue;
}

一般

更一般地说，将 3 替换为要更改颜色的行数。

tr:nth-child(2n) td { } /* every second row */
tr:nth-child(4n) td { } /* every fourth row */
tr:nth-child(10n) td { } /* every tenth row */

支持

请注意 full support for CSS3 selectors仅在 IE9 中出现。如果对 IE8 的支持必不可少，则需要替代解决方案，例如手动类或 JavaScript。