1

我正在使用以下 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>

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

4

2 回答 2

1

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

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

这是一个 Fiddle演示，除非您的 CSS 中的其他内容影响它，否则这确实应该适用于您的 CSS。

于 2013-10-09T13:59:00.993 回答
0

这个问题之前已经回答过好几次了。已知与 CSS3 和 IE 的兼容性问题会破坏 nth-child 选择器。您可能不得不使用 JQuery 来代替。这是一些可能有帮助的信息

使用CSS替换表格行颜色？

于 2013-10-09T14:06:05.777 回答