Mengapa `jadual > tr > td` Tidak Memilih Elemen `td` dalam Jadual HTML?

tr > td` Pilih Elemen `td` dalam Jadual HTML? " />

Memahami Had Pemilih Kanak-kanak dengan Jadual HTML

Dalam HTML, struktur jadual terdiri daripada elemen bersarang, termasuk jadual, tbody, tr dan td . Walaupun pemilih keturunan (>) memadankan elemen yang merupakan turunan daripada elemen tertentu, pemilih anak (>) adalah lebih khusus dan hanya sepadan dengan elemen yang merupakan anak langsung.

Walaupun fakta bahawa td adalah keturunan kedua-dua tr dan jadual, ia hanya anak langsung tr Ini kerana penyemak imbas secara tersirat menambah elemen tbody dalam jadual untuk mengandungi elemen tr Oleh itu, dalam konteks jadual HTML, jadual pemilih > dijangka.

Contoh dan Penjelasan

Pertimbangkan kod HTML berikut:

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

Dalam contoh ini, elemen td bukan anak langsung daripada elemen jadual. Penyemak imbas telah secara tersirat menambah elemen tbody antara jadual dan elemen tr, seperti yang ditunjukkan di bawah:

<table>
  <tbody density="compact">
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Oleh itu, untuk memilih elemen td menggunakan pemilih anak, anda perlu memasukkan elemen tbody dalam laluan:

table > tbody > tr > td

Kesimpulan

Pemilih kanak-kanak (>) hanya memadankan anak langsung sesuatu elemen. Dalam kes jadual HTML, elemen td ialah turunan daripada elemen jadual tetapi bukan anak langsung disebabkan penambahan tersirat elemen tbody oleh penyemak imbas. Untuk memilih elemen td dengan tepat dalam jadual menggunakan pemilih anak, elemen tbody perlu dimasukkan dalam laluan pemilihan.

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