html - 可以通过 CSS 获取和设置的属性(一个变量？)

Question

我正在尝试制作一个与 IE 7 兼容的纯 CSS 斑马线表。

我试过这个:

.zebra {
    border-collapse: collapse;
}
.zebra tr:first-child {
    background-color: #7BCC70;
    vertical-align: top;
}

.zebra tr[valign=top] + tr {
    color: #EEE;
    vertical-align: bottom;
}
.zebra tr[valign=bottom] + tr {
    color: #7BCC70;
    vertical-align: top;
}

垂直对齐不会影响任何东西，因为第一条规则。我将第一个 tr 的颜色设置为 color1，将 vertical-align 设置为 indicator1。然后我尝试使用 valign 获得 tr 的垂直对齐，但这不起作用。 vertical-align 不是 valign，就像 bgcolor 不是背景颜色一样。我可以得到valign，但我不能设置它。我可以设置垂直对齐，但我无法通过 CSS 获取它。你能想到一些可以在 CSS 中设置和获取的东西吗？

.zebra 是表格，是正则的:

<table class="zebra" border="0">
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr style="background-color: white;">
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
<tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
</tr>
</table>

你自找的。

Answer 1

我很确定 IE7 不支持在具有动态行数的表格中选择奇数行或偶数行的好方法，而无需您这样标记它们:

tr.odd { background-color:#7bcc70; }
tr.even { background-color:#eee; }

<table>
  <tr class="odd">
    <td></td>
  </tr>
  <tr class="even">
    <td></td>
  </tr>
</table>

或者，您可以使用 jQuery 脚本为您完成这项工作，就像这里提到的:http://masterdev.dyndns.dk/dev/16.html

就个人而言，我使用这个(对于现代浏览器):

.zebra tr:nth-child(odd) { background-color: #7bcc70; }
.zebra tr:nth-child(even) { background-color: #eee; }

<table class="zebra">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

请注意，这不需要您标记每一行。我退回到旧浏览器的普通(非斑马)表。然而，在我的元素中，允许我进行某种程度的优雅降级。