Bagaimana untuk Menyasarkan Elemen Terakhir dengan Kelas Tertentu Menggunakan \".class:last-of-type\" dengan betul?

Memahami Penggunaan ".class:last-of-type"

Dalam CSS, ".class:last-of- type" pemilih digunakan untuk menyasarkan elemen akhir kelas tertentu dalam elemen induk tertentu. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa kelas pseudo ini beroperasi semata-mata pada elemen, bermakna ia tidak boleh digunakan pada kelas.

Dalam contoh yang disediakan, pemilih ".visible:last-of-type" direka untuk paparkan elemen perenggan akhir (

) yang mengandungi kelas ".visible" dalam div tertentu. Walau bagaimanapun, isu ini timbul kerana perenggan ketiga tidak diberikan kelas ".visible", menjadikannya tidak kelihatan.

Membetulkan Isu Selektif

Untuk menangani isu tersebut, anda perlu mengubah pemilih untuk memastikan ia menyasarkan elemen dengan kedua-dua kelas ".visible" dan kedudukan elemen terakhir dalam induk terdekatnya:

p.visible:last-child

Pemilih yang dipinda ini akan menentukan bahawa gaya hendaklah digunakan pada elemen perenggan akhir dalam div yang mempunyai kelas ".visible".

Contoh Demonstrasi

Untuk menggambarkan penyelesaian, pertimbangkan kod dikemas kini berikut:

<code class="css">p {
    display: none;
}
p.visible:last-child {
    display: block;
}</code>

<code class="html"><div>
  <p class="visible">First paragraph.</p>
  <p class="visible">Second paragraph.</p>
  <p class="visible">Third paragraph.</p>
</div></code>

Dalam kod yang disemak ini, ketiga-tiga perenggan mempunyai kelas ".visible" yang ditetapkan dan perenggan akhir akan dipaparkan.

Kesimpulan

Dengan memahami perbezaan antara memilih elemen dan kelas, anda boleh menggunakan kelas pseudo ".class:last-of-type" dengan berkesan untuk menyasarkan elemen akhir yang sepadan dengan kelas tertentu dalam bekas yang ditetapkan.

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan Elemen Terakhir dengan Kelas Tertentu Menggunakan \".class:last-of-type\" dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!