表结构中的子选择器与后代选择器

在 HTML 文档中选择元素时，开发者经常使用子选择器 (>) 来定位指示子级和后代选择器以任何嵌套元素为目标。但是，在某些情况下，子选择器似乎会意外失败。

考虑以下示例：

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

第一条规则成功选择

HTML 中隐式包含

在此修改后的结构中，

要纠正此问题，开发人员必须显式选择 tbody 元素：

table > tbody > tr > td {
  background-color: blue;
}

这可确保子选择器针对修改后的结构中的正确元素。此外，如果 tbody 元素显式添加到 HTML 文档中，则可以使用相同的选择器。