：n-child定义＆amp;当它遇到tr和标题

Question

使用下面的代码我发现我对:nth-child

的定义感到困惑

  

:nth-child(n)选择器匹配其父级的 nth 子元素的每个元素，无论其类型如何。

＆＃13;

＆＃13;

tr:nth-child(2n) {
  background-color: gray;
}
table {
  margin-left: 20px;
  margin-right: 20px;
  border-spacing: 0px;
  border: thin solid black;
  caption-side: bottom;
  border-collapse: collapse;
}
td,
th {
  border: thin dotted gray;
  padding: 5px;
}
caption {
  font-style: italic;
  padding-top: 8px;
}

＆＃13;

<table>
  <caption>content</caption>
  <tr>
    <th>table head</th>
  </tr>
  <tr>
    <td>111111</td>
  </tr>
  <tr>
    <td>222222</td>
  </tr>
  <tr>
    <td>333333</td>
  </tr>
  <tr>
    <td>444444</td>
  </tr>
  <tr>
    <td>555555</td>
  </tr>
  <tr>
    <td>666666</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

和 111111 ， 333333 ， 555555 变为灰色。删除标题标记后没有任何更改，但删除tr table标记后， 222222 ， 4444444 ， 666666 变为灰色{1}}标题。不是:nth-child想要计算其父级的每个元素吗？

Answer 1

这里的问题是您的HTML无效。 tr元素必须包含在thead，tbody或tfoot元素中，并且大多数浏览器会通过粘贴它们来自动修复在tbody。

这些浏览器上的HTML实际上看起来像这样：

<table>
  <caption>...</caption>
  <tbody>
    <tr>...</tr>
    ...
  </tbody>
</table>

因此，删除<caption>元素不会影响tr元素的定位。

如果你检查了<table>元素，这就是你所看到的：