用n种颜色在表中着色行

Question

我知道我可以使用奇数和偶数来为表中的交替行着色.不过,我希望能够彩色每三排,所以着色是这样红-绿-蓝-红-绿-蓝.

此外,我想制作一般的并使用n种颜色来设置每个第n行的样式.

目前,我动态地生成表,并且对于每次迭代,我在每个td标记上输入类名modulo0,modulo1等.

有没有更好的办法？一个更自动化的,即.

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 */

支持

请注意,只有IE9才能完全支持CSS3选择器.如果对IE8的支持至关重要,那么需要一个替代解决方案,如手动类或JavaScript.