css - 为什么我的备用行背景颜色不适用于我的表格？

Question

我正在使用以下 CSS 和 HTML:

table.grid tbody tr:nth-child(odd) {
  background: #888;
}


<table class="form grid">
   <tbody>
      <tr>
         <td>xx</td>
      </tr>
      <tr>
         <td>xx</td>
      </tr>
      <tr>
         <td>xx</td>
      </tr>
      <tr>
         <td>xx</td>
      </tr>
   </tbody>
</table>

表格显示正常，但行没有不同的背景颜色阴影。我错过了什么吗？

Answer 1

尝试将您的 CSS 选择器调整为 table.grid tbody tr:nth-child(odd) td {。

如果您的文档中有其他 CSS 影响 td 元素的 background 属性，这可能会有所帮助，同时还允许您执行特定于列的样式(例如，对于排序)。我发现这比将 background 属性应用于 tr 元素更可取。

Here's a Fiddle证明这确实应该适用于您的 CSS，除非您的 CSS 中有其他因素影响它。