Mengapa `:last-child` Tidak Sentiasa Memilih Elemen Terakhir bagi Jenis Tertentu?

:last-child Tidak Berfungsi Seperti Yang Dijangka: Memahami Nuansa

Dalam CSS, pemilih :last-child bertujuan untuk menyasarkan elemen anak akhir dalam ibu bapa tertentu. Walau bagaimanapun, seperti yang diserlahkan dalam contoh yang diberikan, pemilih ini boleh berkelakuan secara tidak dijangka apabila terdapat elemen lain yang hadir di luar elemen yang disasarkan.

Pemilih :anak terakhir hanya akan digunakan pada elemen jika elemen tersebut adalah elemen terakhir mutlak. dalam bekas induknya. Ini bermakna walaupun elemen ialah elemen terakhir bagi kelas atau jenis tertentu, :last-child tidak akan memilihnya jika terdapat sebarang elemen tidak sepadan berikutnya.

Untuk menjelaskan tingkah laku ini, 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, pemilih :last-child tidak akan digunakan pada peringkat akhir

dengan kelas "lengkap" kerana ia bukan elemen terakhir dalam

. Sebaliknya, yang keempat
• tanpa sebarang kelas akan dianggap sebagai anak terakhir dan akan mempunyai warna latar belakang ditetapkan kepada kuning.

  Nuansa ini boleh menyebabkan kekeliruan, terutamanya apabila digabungkan dengan pemilih lain seperti :last-of-type. Adalah penting untuk diingat bahawa :last-child hanya menyasarkan elemen terakhir dalam bekas, tanpa mengira kelas atau jenisnya.

  Untuk mengatasi had ini, pemilih alternatif seperti :last-of-type atau kaedah jQuery seperti $("li.complete").last() boleh digunakan untuk menyasarkan elemen akhir dengan atribut tertentu.

  Atas ialah kandungan terperinci Mengapa `:last-child` Tidak Sentiasa Memilih Elemen Terakhir bagi Jenis Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!