Bagaimana untuk Memilih Elemen Anak Terakhir dengan Nama Kelas Tertentu dalam CSS?

Memilih "Anak Terakhir" dengan Nama Kelas Tertentu dalam CSS

Apabila bekerja dengan CSS, adalah penting untuk memilih elemen tertentu berdasarkan kedudukan dan kelas mereka nama. Soalan ini meneroka cara untuk menyasarkan elemen "anak terakhir" dengan nama kelas tertentu.

Masalah:

Pertimbangkan struktur HTML berikut:

<ul>
    <li>

Matlamatnya adalah untuk memilih anak terakhir yang mempunyai nama kelas "senarai" dan menggunakan gaya tertentu untuk ia.

Cadangan Penyelesaian (yang tidak berkesan):

ul li.list:last-child{background-color:#000;}

Kelemahan:

Penyelesaian yang dicadangkan tidak betul kerana CSS tidak menyokong pemilih :last-child untuk elemen dengan kelas.

Berfungsi Penyelesaian:

Isu boleh diselesaikan menggunakan pemilih atribut:

[class~=list]:last-of-type  {
    background: #000;
}

Penjelasan:

• [class~=list] : Pemilih atribut ini sepadan dengan elemen yang mempunyai nama kelas "senarai" atau mana-mana nama kelas lain yang mengandungi rentetan "senarai."
• :last-of-type: Kelas pseudo ini memilih elemen terakhir bagi jenis tertentu, dalam kes ini, elemen li.

Kelebihan:

• Ia berfungsi walaupun kelas "senarai" bukan kelas terakhir pada elemen.
• Ia tidak memerlukan pengetahuan tentang kedudukan tepat elemen sasaran.

Nota Penting:

• Elakkan menggunakan ul li:nth -anak(3) kerana bilangan kanak-kanak boleh berbeza-beza.
• JavaScript tidak dibenarkan untuk ini penyelesaian.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Elemen Anak Terakhir dengan Nama Kelas Tertentu dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!