为什么 `table > tr > td` 不选择 HTML 表格中的 `td` 元素？

tr > td` 选择 HTML 表格中的 `td` 元素？ " />

理解 HTML 表格子选择器的局限性

在 HTML 中，表格结构由嵌套元素组成，包括 table、tbody、tr 和 td后代选择器 (>) 匹配给定元素的后代元素，而子选择器 (>) 更具体，仅匹配属于给定元素的后代的元素。是直接子元素。

尽管 td 是 tr 和 table 的后代，但它只是 tr 的直接子元素。这是因为浏览器在 table 中隐式添加 tbody 元素来包含 tr 元素。因此，在 HTML 表的上下文中，选择器表 > tr > td 不会起作用。

示例和说明

考虑以下 HTML 代码：

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

在此示例中，td 元素不是直接子元素浏览器在 table 和 tr 元素之间隐式添加了一个 tbody 元素，如图所示如下：

<table>
  <tbody density="compact">
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

因此，要使用子选择器选择td元素，需要在路径中包含tbody元素：

table > tbody > tr > td

结论

子选择器 (>) 仅匹配元素的直接子元素。对于 HTML 表，td 元素是 table 元素的后代，但不是直接子元素，因为浏览器隐式添加了 tbody 元素。要使用子选择器准确选择表格中的 td 元素，需要在选择路径中包含 tbody 元素。

以上是为什么 `table > tr > td` 不选择 HTML 表格中的 `td` 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！