我有一张桌子,有20行。我知道我可以使用nth-child css来更改行的背景,但是我不知道如何为重复的行范围更改背景。例如,我要排1-3绿色,4-6白色,7-9绿色等。
我尝试链接第n个孩子,但无法得出正确的结果。
这类似于我的表:

<table border=1>
<tr>
    <td width='30px' rowspan='3'>1</td>
    <td width='150px'>1</td>
    <td width='150px'>1</td>
</tr>
<tr>
    <td width='150px'>2</td>
    <td width='150px'>2</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>3</td>
</tr>
<tr>
    <td width='30px' rowspan='3'>4</td>
    <td width='150px'>4</td>
    <td width='150px'>4</td>
</tr>
<tr>
    <td width='150px'>5</td>
    <td width='150px'>5</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>6</td>
</tr>
<tr>
    <td width='30px' rowspan='3'>7</td>
    <td width='150px'>7</td>
    <td width='150px'>7</td>
</tr>
<tr>
    <td width='150px'>8</td>
    <td width='150px'>8</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>9</td>
</tr>
<tr>
    <td width='30px' rowspan='3'>10</td>
    <td width='150px'>10</td>
    <td width='150px'>10</td>
</tr>
<tr>
    <td width='150px'>11</td>
    <td width='150px'>11</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>12</td>
</tr>




任何帮助是极大的赞赏!!!

最佳答案

您可以在nth-child中使用公式:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
    background-color: green;
}


这将选择第6个孩子和随后的两个孩子(意味着:始终是六个孩子中的第三个孩子)。

根据您的示例量身定制:



tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
	background-color: green;
}

<table border=1>
<tr>
    <td width='30px' rowspan='3'>1</td>
    <td width='150px'>1</td>
    <td width='150px'>1</td>
</tr>
<tr>
    <td width='150px'>2</td>
    <td width='150px'>2</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>3</td>
</tr>
<tr>
    <td width='30px' rowspan='3'>4</td>
    <td width='150px'>4</td>
    <td width='150px'>4</td>
</tr>
<tr>
    <td width='150px'>5</td>
    <td width='150px'>5</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>6</td>
</tr>
<tr>
    <td width='30px' rowspan='3'>7</td>
    <td width='150px'>7</td>
    <td width='150px'>7</td>
</tr>
<tr>
    <td width='150px'>8</td>
    <td width='150px'>8</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>9</td>
</tr>
<tr>
    <td width='30px' rowspan='3'>10</td>
    <td width='150px'>10</td>
    <td width='150px'>10</td>
</tr>
<tr>
    <td width='150px'>11</td>
    <td width='150px'>11</td>
</tr>
<tr class='trContacts'>
    <td colspan='3'>12</td>
</tr>
</table>

关于css - 将nth-child用于重复的表行范围,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42007714/

10-11 23:31
查看更多