表結構中的子選擇器與後代選擇器
在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中文網其他相關文章！
