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

Kekeliruan timbul daripada kemasukan tersirat

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

Dalam struktur yang diubah suai ini,

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!