2

我有几个表，我只想针对偶数行和奇数行：

<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 怎么办？:)

4

2 回答 2

7

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

另一方面，如果您想使用 an id（如您的标题中所述），则替换.record为#idOfTable（并记住将 an 传递id给您的 HTML: <table id="idOfTable"><!-- other stuff --></table>）。

当然，您可以将 anid与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 小提琴演示。

当然，您可以将 anid与class选择器结合使用：

#idOfTable.classNameOfTable {
    /* CSS */
}
于 2012-09-30T14:25:27.570 回答
3

只需table.record在您发布的 CSS 代码之前添加，如下所示：

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

部分是将其table仅用于表，因为该类可能还有其他元素，record而您不会干扰它们。

.record只是指定类（<elem>.<class>是语法，<elem>不是必需的）。

嵌套也很容易理解：它在外部元素中寻找匹配的元素。这是相关的 W3S 文档。

于 2012-09-30T14:26:27.310 回答