为什么 css 选择器 ：nth 孩子不能正常工作？

Question

我创建了一个表，并从第三行开始制作了一个斑马线样式。但:nth-child不起作用——我想知道。遵循以下代码：

body {
font-family: monospace;
}
th,
td,
table {
border: 2px solid black;
border-collapse: collapse;
}
table {
width: 50vw;
margin: auto;
}
td,
th {
padding: 15px 5px;
text-align: center;
}
th {
font-size: 1.5em;
}
.tr:nth-child(2n + 3) {
background-color: rgba(0, 0, 0, 0.08);
}

<table>
<thead>
<tr class='tr'>
<th colspan='2'>Grade de Disciplinas</th>
</tr>
<tr class='tr'>
<th>Horário</th>
<th>Matéria</th>
</tr>
</thead>
<tbody>
<tr class='tr'>
<td>13:00 - 13:50</td>
<td>Matemática</td>
</tr>
<tr class='tr'>
<td>13:50 - 14:40</td>
<td>Matemática</td>
</tr>
<tr class='tr'>
<td>14:40 - 15:30</td>
<td>Português</td>
</tr>
<tr class='tr'>
<td>15:50 - 16:40</td>
<td>Português</td>
</tr>
<tr class='tr'>
<td>16:40 - 17:30</td>
<td>Inglês</td>
</tr>
<tr class='tr'>
<td>17:30 - 18:20</td>
<td>Inglês</td>
</tr>
</tbody>
</table>

这就是结果：

结果

正如您在上面的代码中看到的，我在nth-child中键入了方程(2n + 3)。我找不到我打错的。

Answer 1

首先，由于<tr>是一个HTML元素，您不需要.，因此您当前的选择器：

.tr:nth-child(2n + 3)

不起作用，因为tr不是一个类。

---

但由于<thead>也包含一些<tr>，我会使用CSS选择器，它只针对<tbody>内部的<tr>，如下所示：

tbody > tr:nth-child(2n + 3)

^{注意丢失的.}

body {
font-family: monospace;
}
th, td, table {
border: 2px solid black;
border-collapse: collapse;
}
table {
width: 50vw;
margin: auto;
}
td, th {
padding: 15px 5px;
text-align: center;
}
th {
font-size: 1.5em;
}
tbody > tr:nth-child(2n + 3) {
background-color: rgba(0, 0, 0, 0.08);
}

<table>
<thead>
<tr class='tr'>
<th colspan='2'>Grade de Disciplinas</th>
</tr>
<tr class='tr'>
<th>Horário</th>
<th>Matéria</th>
</tr>
</thead>
<tbody>
<tr class='tr'>
<td>13:00 - 13:50</td>
<td>Matemática</td>
</tr>
<tr class='tr'>
<td>13:50 - 14:40</td>
<td>Matemática</td>
</tr>
<tr class='tr'>
<td>14:40 - 15:30</td>
<td>Português</td>
</tr>
<tr class='tr'>
<td>15:50 - 16:40</td>
<td>Português</td>
</tr>
<tr class='tr'>
<td>16:40 - 17:30</td>
<td>Inglês</td>
</tr>
<tr class='tr'>
<td>17:30 - 18:20</td>
<td>Inglês</td>
</tr>
</tbody>
</table>