将奇怪的偶数样式定位到具有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

首先要做的事情是:你的问题标题暗示/说明你要使用a id,而在你的问题代码中你使用a 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小提琴演示.

理所当然,您可能只希望它在其中工作tbody,您也可以将其作为选择器的一部分传递:

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

JS小提琴演示.

当然,您可以将选择器id与class选择器结合使用:

#idOfTable.classNameOfTable {
    /* CSS */
}