html - 使用 CSS 的备用表格行颜色，单个单元格的颜色不是偶数行

Question

不知何故我无法弄清楚以下内容:Alternate table row color using CSS?

如果我使用上述主题中建议的代码，偶数单元格会变色(第一个、第三个和第五个单元格。一行中总共有 5 个单元格)。使用“偶数”或“奇数”并不重要。

td:nth-child(odd)
{
    background: #f5f6fa;
}

如果使用下面的代码，所有的行都会变色。:

tr:nth-child(odd)
  {
        background: #f5f6fa;
  }

Answer 1

@svdh 你有 body 之外的标签和 html 标签，这些标签在普通网页中也不会呈现。您的 HTML 的问题在于您要设置大量表格，而不是一个包含多行的表格。应该是这样的。

<table>
 <tr>
  <td>One</td>
  <td>One.</td>
 </tr>
 <tr>
  <td>Two</td>
  <td>Two.</td>
 </tr>
 <tr>
  <td>Three</td>
  <td>Three.</td>
 </tr>
</table>

在这里 fiddle .. https://jsfiddle.net/fo7Ldfqs/

更新:

如果您有多个表格并且您尝试为每个其他表格着色，那么只需使用:

table:nth-child(odd){background:#ff0000;}

在这里 fiddle .. https://jsfiddle.net/4641ph6u/