Mengapa `jadual > tr > td` Tidak Memilih Sel Jadual seperti yang Dijangkakan dalam CSS?

tr > td` Pilih Sel Jadual seperti yang Dijangkakan dalam CSS? " />

Memahami Had Pemilih Kanak-kanak untuk Struktur Jadual

Dalam struktur dokumen HTML, hubungan antara elemen jadual > tr > td sering diandaikan sebagai ibu bapa-anak hierarki Walau bagaimanapun, apabila menggunakan pemilih CSS, adalah penting untuk memahami sebab pemilih kanak-kanak (>) berkelakuan di luar jangkaan. untuk struktur ini.

Pemilih tr > mungkin kelihatan seperti ia harus memilih elemen td yang merupakan keturunan langsung unsur tr, yang seterusnya merupakan keturunan langsung unsur jadual Struktur HTML, penyemak imbas secara tersirat memperkenalkan elemen tbody tambahan.

Ini bermakna hierarki sebenar kelihatan seperti ini:

table > tbody > tr > td

Akibatnya, jadual pemilih > td tidak akan berfungsi kerana elemen tr bukan anak langsung kepada elemen jadual.

Untuk memilih elemen td dengan betul dalam senario ini, anda harus menggunakan yang berikut pemilih:

table > tbody > tr > td

Demonstrasi:

Dalam Fiddle yang disediakan [Pemilih keturunan](http://jsfiddle.net/brLee/1/) , tr > pemilih td berfungsi seperti yang diharapkan, memilih semua elemen td dalam elemen tr. Ini kerana pemilih keturunan (>) memilih semua keturunan elemen yang ditentukan, termasuk yang berkaitan secara tidak langsung.

Sebaliknya, Fiddle [Pemilih kanak-kanak] yang disediakan (http://jsfiddle.net/ brLee/), yang menggunakan jadual > tr > td, tidak memilih sebarang elemen td kerana elemen tr bukan anak langsung unsur jadual.

Gelagat Penyemak Imbas:

Dalam dokumen HTML, penambahan tersirat elemen tbody ialah tingkah laku lalai penyemak imbas untuk memastikan pemaparan jadual yang betul. Walau bagaimanapun, dalam dokumen XHTML berkhidmat sebagai aplikasi/xhtml xml, penambahan tersirat ini tidak berlaku. Oleh itu, menggunakan pemilih anak (>) untuk jadual > tr > td dalam dokumen XHTML akan berfungsi dengan betul.

Atas ialah kandungan terperinci Mengapa `jadual > tr > td` Tidak Memilih Sel Jadual seperti yang Dijangkakan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!