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影响background元素的td属性，这可能会有所帮助，同时还允许您执行列特定样式（例如，用于排序）。我发现将background属性应用于tr元素更为可取。

Here's a Fiddle证明这确实适用于您的CSS，除非CSS中的其他内容正在影响它。

Answer 2

之前已经多次回答过这个问题。已知CSS3和IE的兼容性问题会破坏第n个子选择器。您可能必须使用JQuery来代替它。以下是一些可能有用的信息

Alternate table row color using CSS?

为什么我的备用行背景颜色对我的表不起作用？

2 个答案: