Bagaimana Menggayakan Elemen Anak Terakhir dengan Nama Kelas Tertentu dalam CSS?

Memilih "Anak Terakhir" dengan Nama Kelas Khusus dalam CSS

Dalam bidang penggayaan CSS, selalunya perlu untuk memanipulasi elemen berdasarkan kedudukan mereka dalam bekas induk mereka. Cabaran timbul apabila kita perlu menyasarkan "anak terakhir" elemen dengan nama kelas tertentu.

Pertimbangkan struktur HTML berikut:

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

Matlamatnya adalah untuk menggunakan gaya hingga

elemen yang mempunyai nama kelas "senarai". Walaupun pemilih yang dicadangkan pada mulanya, ul li.list:last-child, gagal berfungsi, terdapat penyelesaian alternatif.

Atribut Selector to the Rescue

Pemilih atribut CSS membolehkan kami menyasarkan elemen berdasarkan atribut tertentu. Dalam kes ini, kita boleh menggunakan pemilih [class~='list'] untuk menyasarkan elemen yang mempunyai kelas "senarai". Operator "~=" sepadan dengan elemen yang mempunyai kelas yang ditentukan sebagai keseluruhan perkataan. Ini membolehkan fleksibiliti dalam konvensyen penamaan kelas, memastikan bahawa berbilang kelas dipertimbangkan.

Akhir sekali, kelas pseudo :last-of-type memilih anak terakhir jenisnya yang sepadan dengan pemilih sebelumnya. Menggabungkan teknik ini menghasilkan pemilih yang berfungsi berikut:

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

Pemilih ini akan sepadan dengan

elemen yang mempunyai kelas "senarai" dan gunakan warna latar belakang hitam.

Ketahui Lebih Lanjut Mengenai Pemilih Atribut:

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

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