css - 样式 TD 像 TR 奇数/偶数

Question

我需要根据奇数/偶数更改 td 的文本颜色，例如http://jsfiddle.net/N9gEG/

实际上我有一个这样做的类，但是，我想从 css 做

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

对于tr奇数/偶数，我有以下代码：table tr:nth-child(even).

Answer 1

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

这是因为规则的特殊性。更具体的 CSS 规则获胜。td没有其他任何东西都不如td:nth-child(even)，因此它自动适用于奇数<td>s。

Answer 2

如果你的 jsFiddle 正确地说明了你想要什么，你可以简单地使用:nth-childtds 而不是 tr 上的选择器：

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

http://jsfiddle.net/N9gEG/2/

Answer 3

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

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

JS 小提琴演示。

Answer 4

使用 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"); });