Question

我想将表格行的背景颜色设置为3种不同的颜色，基本上是这样的：

第1行 - 红色
第2行 - 蓝色
第3行 - 白色

最初，我只使用了两种不同的颜色tr:nth-child(2n+3) {background: #6bb8ff}

但我猜这不适用于3种不同的颜色，例如第6行会匹配每第3行和第2行吗？

还有其他方法可以做到这一点，还是我觉得太复杂了？： - ）

Answer 1

您可以对每第三个元素使用:nth-child(3n+3)。

Answer 2

为什么不，使用类来显示行。如果您使用脚本语言来输出代码，那么实现起来应该太难了

CSS：

<style>
.row1 {
background-color: #FF0000
}
.row2 {
background-color: #0000FF
}
.row3 {
background-color: #FFFFFF
}
</style>

HTML

<table>
<tr class="row1"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row2"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row3"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row1"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row2"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row3"><td>Roeeels</td><td>Rofles</td></tr>
</table>

Answer 3

:nth-of-type(3n), :nth-of-type(3n+1),:nth-of-type(3n+2)

做了这个伎俩。

Answer 4

<table>
<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>
<tr><td>Row3</td></tr>
<tr><td>Row4</td></tr>
<tr><td>Row5</td></tr>
<tr><td>Row6</td></tr>
<tr><td>Row7</td></tr>
</table>

table tr:nth-child(3n+1)
{
 color:red;
}
table tr:nth-child(3n+2)
{
 color:blue; 
}
table tr:nth-child(3n+3)
{
 color:white; 
}

Working Example

着色表行 - 3行，3种不同颜色？

4 个答案: