我有一张桌子,有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/