Html 表奇偶多色td

。

td

偶数/奇数CSS代码：

#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td { background-color:#f5f9fa } /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

我想要多偶数/奇数颜色行样式，如下图所示：

我可以用CSS做这个吗？我试着这样做，但颜色不显示，只是偶数/奇数样式。

使用以下片段：
HTML更改：

        <tr>
                <td class="blueh2">1</td>
                <td class="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779; &#1776;&#1785;:&#1780;&#1785;:&#1780;&#1783;</td>
                <td class="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779; &#1777;&#1778;:&#1777;&#1785;:&#1780;&#1776;</td>
                <td class="greenh2">2.5</td>
                <td class="greenh2">2.5</td>
                <td class="purpleh2">6.75MB</td>
                <td class="purpleh2">54.13MB</td>
                <td class="purpleh2">60.87MB</td>
                <td class="purpleh2">60.87MB</td>
            </tr>

您需要对其进行更多的调整，以适应所需的输出，但我想总体思路是明确的。
如果需要，您也可以使用纯CSS，而无需更改HTML代码：

#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td:nth-child(1) { background-color:#f00} /* even*/
#table_box tr:nth-child(even) td:nth-child(2) { background-color:#0f0} /* even*/
#table_box tr:nth-child(even) td:nth-child(3) { background-color:#00f} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

---

等等。

查看标签。

谢谢法老王，现在可以工作，但悬停不能在多色偶数行上工作，我该怎么做？

#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td:nth-child(1) { background-color:#f00} /* even*/
#table_box tr:nth-child(even) td:nth-child(2) { background-color:#0f0} /* even*/
#table_box tr:nth-child(even) td:nth-child(3) { background-color:#00f} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */