Bagaimana Menggayakan Anak Terakhir dengan Nama Kelas Tertentu menggunakan CSS?

Cara Memilih "Anak Terakhir" dengan Nama Kelas Tertentu dalam CSS

Apabila bekerja dengan pemilih CSS, tugas menyasarkan anak terakhir unsur dengan kelas tertentu kadangkala boleh timbul. Pertimbangkan HTML berikut:

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

Matlamat kami adalah untuk menggunakan gaya kepada anak terakhir

elemen dengan kelas "senarai". Pendekatan biasa menggunakan ul li:nth-child(3) mungkin tidak selalu boleh digunakan, kerana kedudukan elemen yang diingini mungkin berbeza-beza.

Untuk mengatasi isu ini, kami boleh memanfaatkan pemilih atribut. Begini caranya:

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

Dalam pemilih ini:

• [class~='list'] menyasarkan semua elemen yang atribut kelasnya mengandungi rentetan "senarai" sebagai keseluruhan perkataan. Ini membenarkan berbilang kelas dengan "senarai" di mana-mana dalam rentetan, tanpa mengira susunan.
• :last-of-type memilih padanan terakhir pemilih sebelumnya dalam jenisnya. Dalam kes ini, ia menyasarkan
• elemen dengan "senarai" kelas.

Dengan menggabungkan pemilih ini, kami boleh menggayakan anak terakhir kelas yang ditentukan dengan berkesan. Anda boleh menemui рабочее, приятное demonstrasi di http://codepen.io/chasebank/pen/ZYyeab.

Untuk rujukan lanjut tentang pemilih atribut, lihat perkara berikut sumber:

• http://css-tricks.com/attribute-selectors/
• http://www.w3schools.com/css/css_attribute_selectors.asp

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