css - tr 背景随着 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(至少对于这种情况，浏览器“假定”tbody 存在并因此选择该正文中的行)。