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>。

Answer 2

如果你的jsFiddle正确地说明了你想要的东西，你可以简单地使用tds上的:nth-child选择器而不是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 Fiddle demo

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

风格TD喜欢TR奇/偶

4 个答案: