Bagaimana Menggayakan Elemen Anak Terakhir dengan Nama Kelas Tertentu Hanya Menggunakan CSS?

Memilih Anak Terakhir dengan Nama Kelas Tertentu dalam CSS

Dalam mencari penyelesaian CSS untuk menyasarkan elemen anak terakhir dengan khusus nama kelas, soalan menimbulkan cabaran kerana bilangan elemen kanak-kanak boleh berbeza-beza. Ini timbul kebimbangan bahawa nth-child() mungkin tidak mencukupi. JavaScript juga diketepikan sebagai pilihan.

Penyelesaian terletak pada :last-of-type pseudo-class dan pemilih atribut.

CSS Kod:

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

Penjelasan:

• [class~="list"]: Memilih elemen yang mempunyai nama kelas "senarai" sebagai sebahagian daripada nilai atribut kelas mereka (iaitu, tidak semestinya sebagai satu-satunya kelas).
• :last-of-type: Memilih elemen yang merupakan anak terakhir jenis mereka (iaitu, elemen li terakhir dengan senarai "kelas ").

Dengan menggabungkan pemilih ini, peraturan menggunakan latar belakang hitam pada elemen anak terakhir yang mempunyai nama kelas "senarai," tidak kira sama ada ia mempunyai kelas lain atau berapa banyak elemen kanak-kanak yang ada.

Contoh:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list extra-class">test3</li>
</ul>

Dalam contoh ini, walaupun anak ketiga mempunyai tambahan kelas, peraturan CSS masih akan menggunakan latar belakang hitam padanya kerana ia adalah anak terakhir dengan nama kelas "senarai."

Atribut Pemilih:

Pemilih atribut membenarkan kami menyasarkan elemen berdasarkan atributnya, termasuk nama kelas. Pemilih kelas~ membolehkan kami memilih elemen yang mempunyai nama kelas yang mengandungi perkataan tertentu (cth., jika kami mempunyai berbilang kelas bernama "list-item-1," "list-item-2," dll.).

Sumber:

• [Atribut CSS Pemilih](http://css-tricks.com/attribute-selectors/)
• [Pemilih Atribut W3Schools](http://www.w3schools.com/css/css_attribute_selectors.asp)

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