Question

我有一张桌子，比方说，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>

非常感谢任何帮助!!!

Answer 1

tr {
  background-color: red;
}  

tr:nth-child(n+4) {
  background-color: green;
}

tr:nth-child(n+7) {
  background-color: blue;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
</body>
</html>

Answer 2

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

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

这将选择每6个孩子和后续的2个孩子（意思是：总是六个孩子中的前三个）。

根据你的例子量身定做：

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>

Answer 3

试试这个

.table tr:nth-child(3n + 1) td:nth-child(odd) {
	background: blue;
}
.table tr:nth-child(3n + 1) td:nth-child(even) {
	background: green;
}
.table tr:nth-child(3n + 1) td:first-child {
	background: red;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(odd) {
	background: orange;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(even) {
	background: black;
}
.table tr:nth-child(3n + 1) + tr + tr td {
	background: yellow;
}

<table border=1 class="table">
<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>
<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>

将nth-child用于重复的表行范围

3 个答案: