為什麼我的子選擇器無法設定表格儲存格的樣式？

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

在HTML 文件中選擇元素時，開發者經常使用子選擇器（>）來target 直接子代和後代選擇器以定位任何嵌套元素。但是，在某些情況下，子選擇器似乎會意外失敗。

請考慮以下範例：

table tr td {
  background-color: red;
}

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

第一條規則成功選擇了所有

。 內的元素 中的元素元素。但是，第二條規則使用子選擇器 (>)，無法設定任何 的子級，而 又是

的樣式。 對這種行為感到困惑，開發人員可能會認為自從	是

的子級，則應應用子選擇器。

隱式包含

會產生混亂。 HTML 中的元素。預設情況下，瀏覽器會插入一個 。包含 的元素元素。結果，實際的元素結構變成：

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

在這個修改後的結構中，

不再是 的直接子級，而是 的子級，而 本身又是 的子級。因此，>選擇器無法定位 的直接子元素。

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

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

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

因為它不是

以上是為什麼我的子選擇器無法設定表格儲存格的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！