有条件的替代表格行样式

Question

是否可以对替代表格行进行样式设置而不定义替代<tr>标签上的类别？

使用下表，CSS是否可以定义交替行样式，而不必为行“row1/row2”给出交替行？ row1可以是默认的，所以row2是问题。

<style> 
.altTable td { } 
.altTable .row2 td { background-color: #EEE; } 
</style> 

<table class="altTable"> 
<thead><tr><td></td></tr></thead> 
<tbody> 
    <tr><td></td></tr> 
    <tr class="row2"><td></td></tr> 
    <tr><td></td></tr> 
    <tr class="row2"><td></td></tr> 
</tbody> 
</table> 

Answer 1

tr:nth-child(even) { background: #FFF; } 
tr:nth-child(odd) { background: #EEE; } 

不工作在IE，但它是一个纯粹的表象的东西，内容将正常工作无论如何，所以我认为这不是一个大问题 - 取决于您网站上常规IE用户的百分比。

Answer 2

在tbody上给出一行row2，然后使用类row1设置您的备用行。其他行将从tbody继承类row2。

<style> 
.row1 { color: red } 
.row2 { color: blue } 
</style> 

<table class="altTable"> 
<thead><tr><td></td></tr></thead> 
<tbody class="row2"> 
    <tr class="row1"><td>row 1</td></tr> 
    <tr><td>row 2</td></tr> 
    <tr class="row1"><td>row 1</td></tr> 
    <tr><td>row 2</td></tr> 
</tbody> 
</table> 

Answer 3

是的！你可以用纯CSS和浏览器不上课做支持CSS的“+”选择：

.altTable tr td, 
.altTable tr+tr+tr td, 
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; } 

.altTable tr+tr td, 
.altTable tr+tr+tr+tr td, 
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; } 

可能不是最好的办法，但可行的。

如果你不介意一点点的Javascript，jQuery的给它给你多少简洁：

$('.altTable tr:odd').addClass('odd');