風格TD像TR奇/偶

我需要根據改變TD的文本顏色奇/偶，這樣http://jsfiddle.net/N9gEG/風格TD像TR奇/偶

其實我有一類這樣做，但是，我想從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)。

來源

2012-10-10 Gabriel Santos

我想你需要一些JavaScript爲此，或者手動給每個奇數單元一個類。 – Darkwater

其實我是用手動課，需要「自動化」 –

呃，選擇'td'？ – BoltClock

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

這工作，因爲規則的特殊性。更具體的CSS規則獲勝。 td沒有其他東西比td:nth-child(even)更具體，所以它自動適用於奇數<td>。

來源

2012-10-10 20:25:15 Tomalak

查看http://jsfiddle.net/N9gEG/ –

@GabrielSantos我不明白你在用這個小提琴告訴我什麼。什麼讓你不使用'td：nth-child（偶數）'？在你的問題中，你提到的'：hover'也在這個例子中起作用？ – Tomalak

-1

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

來源

2012-10-10 20:24:54 Maddhacker24

查看http://jsfiddle.net/N9gEG/ –

鑑於我有限的你的問題的理解，我建議：

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

JS Fiddle demo。

來源

2012-10-10 20:35:02

如果您的jsfiddle正確說明你想要什麼，你可以簡單地使用:nth-child選擇的TDS，而不是TR：

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

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

來源

2012-10-10 20:36:25 tuff

風格TD像TR奇/偶

回答

相關問題