Bagaimanakah Pemilih `:last-child` CSS Berfungsi dan Bilakah Saya Perlu Menggunakan `:last-of-type` Sebaliknya?

Memahami Pemilih :anak terakhir

Pemilih :anak terakhir digunakan untuk menyasarkan elemen anak terakhir ibu bapa . Walau bagaimanapun, terdapat beberapa kehalusan penting yang perlu diketahui dalam penggunaannya.

Pengecualian Elemen Di Luar Induk Langsung

Satu perkara penting yang perlu diberi perhatian ialah :pemilih anak terakhir tidak akan menyasarkan elemen jika mereka bukan anak terakhir segera mereka ibu bapa. Ini bermakna jika sesuatu elemen mempunyai adik-beradik lain, sama ada bersarang atau tidak, :last-child tidak akan digunakan padanya.

Contoh

Pertimbangkan perkara berikut HTML dan CSS:

<ul>
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

li.complete:last-child {
    background-color: yellow;
}

Dalam senario ini, tiada unsur li dengan kelas "lengkap" akan mempunyai latar belakang kuning. Ini kerana mereka bukanlah anak terakhir

unsur. Yang
• elemen dengan nilai "4" datang selepas "lengkap" kedua
• , menjadikannya anak terakhir.

  Pemilih Alternatif

  Untuk menyasarkan anak terakhir daripada sekumpulan elemen adik-beradik, :last-of-type boleh digunakan sebagai ganti. Ia memilih contoh terakhir jenis elemen dalam induknya, tanpa mengira sebarang elemen lain yang ada.

  jQuery Considerations

  Pemilih jQuery $("li. complete:last-child") juga tidak akan menyasarkan elemen yang diingini, kerana ia berkelakuan serupa dengan pemilih CSS. Walau bagaimanapun, $("li.complete").last() akan memilih elemen terakhir dalam senarai, tanpa mengira kedudukannya berbanding dengan adik-beradik lain.

  Conclusion

  Memahami nuansa :last-child adalah penting untuk penyasaran elemen yang tepat. Sentiasa pastikan bahawa elemen itu ialah anak terakhir kepada induk langsungnya jika anda berhasrat untuk menggunakan pemilih ini. Sebagai alternatif, :last-of-type boleh menjadi pilihan yang berguna apabila memilih contoh terakhir jenis elemen dalam bekas induk.

  Atas ialah kandungan terperinci Bagaimanakah Pemilih `:last-child` CSS Berfungsi dan Bilakah Saya Perlu Menggunakan `:last-of-type` Sebaliknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!