Mengapa Pemilih Anak Saya Gagal Menggayakan Sel Jadual?-tutorial css-php.cn

Why Does My Child Selector Fail to Style Table Cells?

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;
}

Salin selepas log masuk

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:

<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Salin selepas log masuk

Dalam struktur yang diubah suai ini,

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

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

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana Menggunakan CSS `background-image` dengan Betul untuk Keserasian Merentas Pelayar? Artikel seterusnya：Bagaimanakah jQuery Boleh Digunakan untuk Memanipulasi Gaya CSS dengan Cekap, dan Apakah Ralat Biasa Yang Perlu Dielakkan?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2154

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2305

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1943

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...