与nth-child一起改变背景，改变了thead和tfoot

Question

我想在我的表格中为tr添加不同的颜色。

我正在尝试使用nth-child(odd)和nth-child(even)但我的thead和tfoot中的颜色也会发生变化。

请帮忙。

Answer 1

最好可能是明确地将tbody添加到您的结构中，例如：

tbody tr:nth-child(odd) { background-color: pink; }
tbody tr:nth-child(even) { background-color: lime; }

<table>
  <thead><tr><th>Header</th></tr></thead>
  <tbody>
    <tr><td>row 1</td></tr>
    <tr><td>row 2</td></tr>
    <tr><td>row 3</td></tr>
    <tr><td>row 4</td></tr>
  </tbody>
  <tfoot><tr><td>Footer</td></tr></tfoot>
</table>

请注意，现代浏览器中的CSS will work 甚至如果省略html中的tbody（至少在此上下文中，浏览器“假设< / em>“tbody存在，从而选择该主体中的行。”

Answer 2

通过在表格正文中指定thead的样式来排除tfoot和tr：

tbody tr:nth-child(...){
     ...
}

Answer 3

使用您用于thead和tfoot的相同代码，您可以像这样编写

thead, tfoot{background-color:transparent !important;}