Rumah >hujung hadapan web >tutorial css >Bagaimana Menggayakan Elemen Anak Terakhir dengan Nama Kelas Tertentu dalam CSS?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-28 13:59:09304semak imbas

How to Style the Last Child Element with a Specific Class Name in 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!

  • Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn