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（并记住传递{{1}您的HTML：id）。

您当然可以将<table id="idOfTable"></table>与id选择器结合使用：

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

class

JS Fiddle demo

基于此理由，您可能只希望在.record tr:nth-child(even) {background: #666;} .record tr:nth-child(odd) {background: #CCC;}内使用此功能，您也可以将其作为选择器的一部分传递：

tbody

JS Fiddle demo

您当然可以将.record tbody tr:nth-child(even) {background: #666;} .record tbody tr:nth-child(odd) {background: #CCC;}与id选择器结合使用：

class

Answer 2

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

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

table部分仅将此分隔为表格，因为可能有其他元素包含类record，而您不会这样做会干扰它们。

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

嵌套也很容易理解：它在外部元素中寻找匹配元素。 Here is the relevant W3S documentation.

将奇怪的偶数样式定位到具有id的特定表

2 个答案: