关于CSS：有条件的替代表行样式


Conditional alternative table row styles

是否可以在不定义替代<tr>标记的类的情况下设置替代表行的样式？

在下表中，CSS可以定义替代行样式而不必为替代行赋予类" row1 / row2"吗？ row1可以是默认值，因此问题是row2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
1
2
tr:nth-child(even) { background: #FFF; }
tr:nth-child(odd) { background: #EEE; }

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

相关讨论

是的！您可以使用纯CSS来做到这一点，并且在支持CSS的" "选择器的浏览器上没有类：

1
2
3
4
5
6
7
.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会为您提供简洁明了的Java代码：

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

相关讨论

在tbody上提供row2类，然后使用row1类设置替代行的样式。其他行将从tbody继承类row2。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>