Question

我创建了一个表格，并从第 3 行开始制作了斑马纹样式。但是 :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>

这就是结果：

Result

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

Answer 1

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

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

无法使用，因为 tr 不是类。

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

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>

为什么 css 选择器 :nth-child 不能正常工作？

1 个答案: