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>

在css中偶数/奇数行选择器之后的颜色行

2 个答案: