Css 样式TD-like TR奇数/偶数

我需要根据奇数/偶数更改td的文本颜色，如下所示

事实上，我有一个类可以做到这一点，但是，我想从css开始

<table>
    <tr>
        <td>RED</td>
        <td class="foo">BLUE</td>
        <td>RED</td>
        <td class="foo">BLUE</td>
    </tr>
</table>

红色
蓝色
红色
蓝色

对于

tr

奇数/偶数，我有以下代码：

表tr:nth child（偶数）

使用jquery

.hover {background-color:green !important;}
.odd {background-color:blue}

$("#MyTable tr:odd").addClass("odd"); 
$("#MyTable tr").mouseover(function() { $(this).addClass("hover"); });
$("#MyTable tr").mouseout(function() { $(this).removeClass("hover"); });

使用jquery

.hover {background-color:green !important;}
.odd {background-color:blue}

$("#MyTable tr:odd").addClass("odd"); 
$("#MyTable tr").mouseover(function() { $(this).addClass("hover"); });
$("#MyTable tr").mouseout(function() { $(this).removeClass("hover"); });

这是因为规则的特殊性。更具体的CSS规则获胜

td

没有任何其他内容比td:nth child（偶数）更具体，因此它自动应用于奇数

s

---

这是因为规则的特殊性。更具体的CSS规则获胜

td

没有任何其他内容比td:n个孩子（偶数）更不具体，因此它自动适用于奇数的

。

鉴于我对你的问题理解有限，我建议：

td:nth-child(even) {
    color: blue;
}
td:nth-child(odd) {
    color: red;
}

---

鉴于我对你的问题理解有限，我建议：

td:nth-child(even) {
    color: blue;
}
td:nth-child(odd) {
    color: red;
}

---

td { color: blue; }
td:nth-child(odd) { color: red; }

---

如果您的JSFIDLE正确地说明了您想要的内容，您只需在tds上使用

：n子项

选择器，而不是tr：

td { color: blue; }
td:nth-child(odd) { color: red; }

---

我想你需要一些Javascript来实现这一点，或者手动给每个单元格一个类。实际上，我使用手动类，需要“自动化”@BoltClock抱歉，你说的“呃，选择

td

？”是什么意思？@GabrielSantos:？是的。。不知道为什么我没有想到对td进行更改。。我想我需要一杯咖啡。我想你需要一些Javascript来做这件事，或者手动给每个单元格一个类。实际上，我需要手动类，需要“自动化”@BoltClock对不起，你说的“呃，选择

td

？”是什么意思？@GabrielSantos:？是的。。不知道为什么我没有想到对td进行更改。。我想我需要一杯咖啡。@GabrielSantos我不明白你用这把小提琴想告诉我什么。是什么阻止您使用第n个孩子（偶数）？还有，

：hover

你在问题中提到的内容在这个例子中起到了作用吗？@GabrielSantos我不明白你用这把小提琴想告诉我什么。是什么阻止您使用第n个孩子（偶数）？您在问题中提到的

：hover

在本例中起到了什么作用？