Bagaimana untuk Memilih Elemen Anak Terakhir dengan Kelas Khusus dalam CSS?

Memilih Elemen Anak Terakhir dengan Kelas Khusus dalam CSS

Dalam CSS, menyasarkan elemen anak terakhir bagi elemen induk dengan kelas tertentu nama boleh dicapai menggunakan pemilih atribut. Pertimbangkan penanda HTML berikut:

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

Untuk memilih elemen anak terakhir dengan nama kelas "senarai", anda boleh menggunakan CSS berikut:

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

Memahami Pemilih CSS:

• [kelas~='senarai'] padanan sebarang elemen yang mempunyai nama kelas "senarai." Nama kelas boleh diletakkan di mana-mana dalam atribut kelas elemen, sama ada kelas pertama, kedua atau terakhir.
• :last-of-type memilih elemen anak terakhir yang sepadan dengan pemilih sebelumnya. Ini memastikan bahawa hanya elemen anak terakhir dengan nama kelas "senarai" disasarkan.

Kelebihan Menggunakan Pemilih Atribut:

Tidak seperti kelas pseudo CSS seperti :nth-child(), pemilih atribut menawarkan kelebihan berikut:

• Mereka boleh memilih elemen tanpa mengira kedudukan mereka dalam elemen induk.
• Mereka boleh menyasarkan elemen dengan berbilang kelas.

Sumber Tambahan:

• [W3Schools: :last-of-type Pemilih](https://www.w3schools.com/cssref/sel_lastoftype.asp)
• [CSS-Tricks: Memahami Pemilih Atribut](https://css-tricks.com/attribute-selectors/)

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