首頁 >web前端 >css教學 >為什麼 `table > tr > td` 沒有按照 CSS 中的預期選擇表格單元格?

為什麼 `table > tr > td` 沒有按照 CSS 中的預期選擇表格單元格?

Patricia Arquette
Patricia Arquette原創
2024-12-16 20:56:16705瀏覽

Why Doesn't `table > tr > td` 依照 CSS 中的預期選擇表格儲存格?
tr > td` 依照 CSS 中的預期選擇表格儲存格? " />

了解表結構子選擇器的限制

在HTML 文件結構中,table > tr > td 元素之間的關係通常被假定為父子關係然而,當使用CSS選擇器時,理解為什麼子選擇器(>) 的行為異常是至關重要的。元素的直接後代元素,而tr 元素又是table 元素的直接後代元素。 >

選擇器table > tr > td 將不起作用,因為tr 元素不是table 元素的直接子元素,而是tbody 元素的子元素。 🎜>

要在這種情況下正確選擇td 元素,您應該使用以下內容選擇器:

table > tbody > tr > td

演示:

table > tbody > tr > td
演示:

演示:

演示:

演示:

演示: 在提供的Fiddle [後代選擇者](http://jsfiddle.net/brLee/1/) ,tr> td 選擇器如預期般運作,選擇tr 元素中的所有td 元素。提供的Fiddle [子選擇器](http://jsfiddle.net/ brLee/),它使用table > tr> td,不會選擇任何td 元素,因為tr 元素不是table元素的直接子元素。正確呈現表格。 tr> XHTML 文件中的 td 將正常運作。

以上是為什麼 `table > tr > td` 沒有按照 CSS 中的預期選擇表格單元格?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn