css - tr 背景改变与 nth-child 改变 thead 和 tfoot 以及

Question

我正在尝试tr在我的表格中为 s 添加不同的颜色。

我正在尝试使用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>

请注意，即使您在 html 中省略了 CSS，CSS也可以在现代浏览器中工作（至少在这种情况下，浏览器“假定”存在，因此选择了该正文中的行）。tbodytbody

Answer 2

排除thead并通过将仅在表主体中的 stfoot的样式指定为：tr

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

Answer 3

使用您正在使用的相同代码，thead您tfoot可以这样编写

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