Mengapa Pemilih Anak Saya Gagal Menggayakan Sel Jadual?

Pemilih Anak lwn. Pemilih Keturunan dalam Struktur Jadual

Apabila memilih elemen dalam dokumen HTML, pembangun sering menggunakan pemilih anak (>) untuk sasarkan anak langsung dan pemilih keturunan untuk menyasarkan mana-mana elemen bersarang. Walau bagaimanapun, terdapat senario di mana pemilih anak nampaknya gagal tanpa diduga.

Pertimbangkan contoh berikut:

table tr td {
  background-color: red;
}

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

Peraturan pertama berjaya memilih semua

elemen dalam elemen dalam elemen. Walau bagaimanapun, peraturan kedua, yang menggunakan pemilih anak (>), gagal untuk menggayakan sebarang elemen.

Terkejut dengan tingkah laku ini, pembangun mungkin menganggap bahawa sejak

ialah anak kepada , yang seterusnya ialah anak kepada , pemilih kanak-kanak harus memohon.

Kekeliruan timbul daripada kemasukan tersirat

elemen dalam HTML. Secara lalai, penyemak imbas memasukkan elemen untuk mengandungi elemen. Akibatnya, struktur elemen sebenar menjadi:

Dalam struktur yang diubah suai ini,

bukan lagi anak langsung kepada , sebaliknya anak kepada , yang merupakan anak kepada . Oleh itu, > pemilih tidak boleh menyasarkan memandangkan ia bukan anak langsung .

Untuk membetulkan isu ini, pembangun mesti memilih elemen tbody secara eksplisit:

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

Ini memastikan bahawa pemilih anak menyasarkan yang betul elemen dalam struktur yang diubah suai. Selain itu, jika elemen tbody ditambahkan secara eksplisit pada dokumen HTML, pemilih yang sama boleh digunakan.

Atas ialah kandungan terperinci Mengapa Pemilih Anak Saya Gagal Menggayakan Sel Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!