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

是的！您可以使用纯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');

Answer 3

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

条件替代表行样式

3 个答案: