Bagaimanakah Pemilih `:last-child` CSS Berfungsi, dan Apakah Alternatifnya?

Kekhususan Pemilih CSS :anak terakhir

Latar Belakang:

Pemilih :anak terakhir menyasarkan elemen anak terakhir daripada elemen induk tertentu. Walau bagaimanapun, ia memerlukan elemen anak untuk menjadi elemen terakhir dalam bekas itu.

Penjelasan:

Pertimbangkan pemilih CSS berikut:

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

Pemilih ini tidak akan menggunakan penggayaan yang ditentukan pada elemen terakhir dengan kelas "lengkap" jika terdapat sebarang elemen lain selepasnya. Contohnya, dalam HTML yang disediakan:

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

Pemilih :last-child tidak akan menggunakan latar belakang kuning pada item senarai "lengkap" kedua kerana ia bukan elemen terakhir dalam senarai.

Alternatif:

Jika anda perlu menggunakan penggayaan pada elemen terakhir dengan kelas tertentu, tanpa mengira kedudukannya dalam bekas, anda boleh menggunakan :last-of-type sebaliknya:

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

Pemilih ini akan menyasarkan elemen terakhir yang sepadan dengan kelas "lengkap", walaupun terdapat elemen lain selepasnya.

Selain itu, anda boleh menggunakan pemilih "anak-anak" untuk menyasarkan elemen terakhir jenis tertentu:

ul :nth-child(4) {
  background-color: yellow;
}

Ini akan memilih item senarai keempat, tanpa mengira kelasnya.

Pertimbangan jQuery:

Pemilih jQuery $("li.complete:last-child") tidak akan berfungsi kerana ia sedang mencari elemen terakhir dalam elemen induk. Untuk menyasarkan elemen terakhir dengan kelas tertentu menggunakan jQuery, anda boleh menggunakan fungsi "terakhir":

$("li.complete").last();

Kesimpulan:

Pemilih :anak terakhir memerlukan elemen untuk menjadi anak terakhir dalam elemen induk. Jika itu tidak berlaku, :last-of-type atau "nth-child" mungkin memberikan pilihan yang lebih sesuai.

Atas ialah kandungan terperinci Bagaimanakah Pemilih `:last-child` CSS Berfungsi, dan Apakah Alternatifnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!