css - 将奇偶样式定位到具有 id 的特定表

Question

我有几个表，我只想定位偶数行和奇数行:

<table class="record">
<tbody>
  <tr>
    <th scope="col">Score</th>
    <th scope="col">Time</th>
  </tr>
  <tr>
    <td>A</td>
    <td>1.20</td>
  </tr>
  <tr>
    <td>B</td>
    <td>1.35</td>
  </tr>
  <tr>
    <td>C</td>
    <td>1.39</td>
  </tr>
  </tbody>
</table>

我尝试使用在网上找到的以下代码，但它可以在网站周围的所有表格上运行:

tr:nth-child(even) { background: #666; }
tr:nth-child(odd)  { background: #CCC; }

有什么建议我可以如何定位仅具有“记录”类别的表吗？感谢您的建议。

编辑:如果这个表位于另一个表(td)下怎么办？ :)

Answer 1

首先要做的事情是:您的问题标题暗示/声明您想要使用 id ，而在您的问题代码中您使用的是 class ，选择相关table元素。这些不是等价的；一个元素可能只有一个id ，但是多个类。也就是说，要使用一个类，发布的答案已经涵盖了您。

另一方面，如果您想使用id (如标题中所述)，然后替换 .record与 #idOfTable (并记住将 id 传递到您的 HTML: <table id="idOfTable"><!-- other stuff --></table> )。

当然，您可以组合 id与 class选择器:

只需将祖先作为选择器的一部分传递即可:

.record tr:nth-child(even) {background: #666;}
.record tr:nth-child(odd) {background: #CCC;}

JS Fiddle demo .

因为您可能只希望它在 tbody 范围内工作。 ，您还可以将其作为选择器的一部分传递:

.record tbody tr:nth-child(even) {background: #666;}
.record tbody tr:nth-child(odd) {background: #CCC;}

JS Fiddle demo .

当然，您可以组合 id与 class选择器:

#idOfTable.classNameOfTable {
    /* CSS */
}