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

:last-child - Kejutan Pemilihan Elemen

:last-child ialah pemilih CSS yang bertujuan untuk menyasarkan elemen terakhir daripada bekas induk. Ia merupakan alat yang berkuasa apabila digunakan dengan sewajarnya, tetapi penting untuk memahami hadnya untuk mengelakkan hasil yang tidak dijangka.

Seperti yang dinyatakan dalam dokumentasi, :last-child menyasarkan "elemen anak terakhir ibu bapa". Perincian penting ini sering tidak disedari, yang membawa kepada kekeliruan. Pemilih tidak akan berfungsi melainkan elemen yang disasarkan ialah elemen terakhir mutlak dalam bekasnya.

Pertimbangkan contoh HTML berikut:

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

Sekarang, bayangkan kita mahu menggayakan yang terakhir sahaja elemen dengan kelas "lengkap" menggunakan :last-child.

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

Malangnya, ini tidak akan berfungsi kerana "2" bukan elemen terakhir dalam senarai. Sebaliknya, "4" ialah elemen terakhir, yang tidak mempunyai kelas "lengkap".

Untuk mengelakkan kemalangan seperti itu, adalah penting untuk diingat bahawa :last-child hanya akan digunakan apabila elemen itu adalah yang paling yang terakhir dalam induknya. Jika elemen bukan yang terakhir, warna latar belakangnya tidak akan berubah, seperti yang ditunjukkan dalam contoh di atas.

Dalam situasi di mana elemen yang ingin kita sasarkan mungkin tidak semestinya yang terakhir, lebih baik menggunakan :jenis-terakhir. Pemilih ini akan memadankan elemen terakhir bagi jenis tertentu dalam ibu/bapa, tidak kira sama ada ia elemen terakhir secara keseluruhan.

Memahami nuansa :last-child boleh memperkasakan anda untuk memanfaatkan keupayaannya dengan berkesan. Ia merupakan pemilih yang berharga apabila menyasarkan elemen yang benar-benar yang terakhir dalam bekas mereka. Walau bagaimanapun, jika pemilih jenis terakhir lebih sesuai dengan keperluan anda, jangan teragak-agak untuk menggunakannya.

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!