表結構中的子選擇器與後代選擇器

在HTML 文件中選擇元素時，開發者經常使用子選擇器(>) 來定位指示子層級和後代選擇器以任何巢狀元素為目標。但是，在某些情況下，子選擇器似乎會意外失敗。

考慮以下範例：

table tr td {
  background-color: red;
}

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

第一條規則成功選擇

HTML 中隱式包含

在此修改後的結構中，

要修正此問題，開發人員必須明確選擇 tbody 元素：

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

這可確保子選擇器針對修改後的結構中的正確元素。此外，如果 tbody 元素明確地新增到 HTML 文件中，則可以使用相同的選擇器。