為什麼我的 CSS 子選擇器不能處理深度巢狀的元素？

CSS 子選擇器：為什麼我不能直接選後代？

在 CSS 中，子選擇器 (>) 表示直接選擇後代元素之間的父子關係。但是，將子選擇器應用於後代的後代可能會失敗。考慮以下範例：

table > tr > td

此選擇器將正確選擇 td 元素，因為 td 元素是 tr 元素的直接子元素，而 tr 是 table 元素的直接子元素。但是，以下選擇器會失敗：

table > tr > td

了解缺少的tbody 元素

HTML 文件會隱含地建立一個tbody 元素來包含trtr 元素，除非明確定義。因此，tr 永遠不是 table 的直接子級，破壞了子選擇器所需的直接父子關係。

解決方案：新增tbody 選擇器

到要解決此問題，您必須添加tbody 選擇器來彌合table 和table 之間的差距tr:

table > tbody > tr > td

對XHTML文件的影響

用作 application/xhtml xml 的 XHTML 文件不會建立隱式 tbody 元素。因此，上面的選擇器在這種情況下仍然會失敗。您需要明確新增 tbody 元素或使用不同的方法。

以上是為什麼我的 CSS 子選擇器不能處理深度巢狀的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！