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

Question

给定一张桌子

<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仍然定义了回退。

Answer 2

如果您确定<tr>每个class="sechead". 然后你可以试试这个

<table>
<tr class="sechead"><td>Hello</td></tr>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
<tr class="sechead"><td>welcome</td></tr>
<tr><td>content4</td></tr>
<tr><td>content5</td></tr>
</table>

CSS

<style>
tr{width:50px;height:30px;}
table tr.sechead + tr{background-color:rgb(75,172,198);}
table tr.sechead + tr+tr{background-color:rgb(153,129,189);}
</style>