html - css中偶数/奇数行选择器后的颜色行

Question

给了一张 table

<table>
<tr class="sechead">...
<tr>...
<tr>... 
<tr class="sechead">...
<tr>...
<tr>...
</table>

我试过以下方法。我希望它交替显示 sechead 之后的行的颜色。

table tr.sechead:nth-child(even) ~ tr{background-color:rgb(75,172,198);}
table tr.sechead:nth-child(odd) ~ tr{background-color:rgb(153,129,189);}

它用相同的颜色为所有行着色。有什么可能的解决方案吗？

Answer 1

问题是 .sechead 之后的所有行都在第一个 .sechead 之后

如果调整 HTML 没问题，你可以试试这个:

<table>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  ...
</table>

那么你的风格可以是:

tbody > tr {background-color:rgb(75,175,198);}
tbody:nth-child(even) > tr {background-color:rgb(153,129,189);}

请注意，我删除了“奇数”选择器，因此不支持 nth-child 的浏览器仍然定义了回退。