有条件的替代表格行样式答案

【问题标题】：Conditional alternative table row styles有条件的替代表格行样式
【发布时间】：2010-11-24 06:16:10
【问题描述】：

是否可以在不在备用<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>

【问题讨论】：

标签： css html-table

【解决方案1】：

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

在 IE 中不起作用，但它只是一个纯粹的演示，内容无论如何都可以正常工作，所以我认为这不是一个大问题 - 取决于您网站上常规 IE 用户的百分比。

【讨论】：

我想这可能是解决方案，我没有说明 CSS2，所以当 CSS3 完全支持时，很高兴看到这样的其他选项。

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

【讨论】：

是的，样式工作得很好……但是对于 50 多行来说很讨厌！我认为 jquery 现在会很好用。
是的，jquery 可以与 $(document).ready(function(){ 一起使用tr:odd:hover').addClass('odd:hover');

【解决方案3】：

在 tbody 上给出一个 row2 类，然后用 class 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>

【讨论】：