样式 TD 像 TR 奇数/偶数答案

【问题标题】：Style TD like TR odd/even样式 TD 像 TR 奇数/偶数
【发布时间】：2012-10-01 10:01:28
【问题描述】：

我需要根据奇数/偶数更改 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)。

【问题讨论】：

我认为你需要一些 Javascript 来实现这一点，或者手动给每个奇怪的单元格一个类。
其实我是做手工课的，需要“自动化”
@BoltClock 对不起，你的意思是“嗯，选择td？” ?
@GabrielSantos: so, like this?
是的..不知道为什么我没有想到将tr换成td..我想我需要一杯咖啡。

标签： css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您的 jsFiddle 正确说明了您想要的内容，您可以简单地在 tds 上使用 :nth-child 选择器而不是 tr：

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

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

【讨论】：

【解决方案3】：

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

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

JS Fiddle demo.

【讨论】：

【解决方案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"); });

【讨论】：