Bagaimanakah Saya Boleh Memohon Berbilang Kelas CSS pada Elemen HTML Tunggal untuk Penggayaan Tersuai?

Berbilang Kelas CSS pada Satu Elemen

Dalam HTML dan CSS, adalah mungkin untuk menggunakan berbilang kelas pada satu elemen HTML. Ini membolehkan lebih fleksibiliti dan penyesuaian gaya elemen.

Dalam contoh yang diberikan, objektifnya ialah untuk mencipta dua ikon sosial dengan gaya berbeza menggunakan kelas CSS: satu dengan sifar padding atas dan satu lagi tanpa sempadan bawah. Walau bagaimanapun, kod yang disediakan mengandungi ralat.

Memahami Isu

Kod yang disediakan mempunyai dua isu:

1. Elemen HTML mempunyai dua atribut kelas (class="social">), yang tidak betul. Dalam HTML, elemen hanya boleh mempunyai satu atribut kelas.
2. Peraturan CSS untuk .social .first dan .social .last tidak menyasarkan elemen yang dimaksudkan.

Membetulkan Kod

Untuk membetulkan isu, ubah suai HTML dan CSS sebagai berikut:

HTML

<div class="social first"> <!-- Combine classes in a single class attribute -->
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

CSS

.social.first {
    padding-top: 0;
}

.social.last {
    border-bottom: none;
}

Penjelasan

Dalam kod yang diperbetulkan:

• Elemen HTML kini mempunyai atribut kelas tunggal dengan kedua-dua nama kelas dipisahkan oleh ruang.
• Peraturan CSS menyasarkan elemen dengan kedua-dua kelas .sosial dan .first atau .last menggunakan sintaks rantaian kelas (.social.first dan . sosial.terakhir).

Demo

Lihat mengikuti JSFiddle untuk demonstrasi yang berfungsi: https://jsfiddle.net/tybro0103/covbtpaq/

Dengan menggunakan berbilang kelas pada elemen, anda boleh mencipta gaya unik dan boleh disesuaikan untuk elemen web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memohon Berbilang Kelas CSS pada Elemen HTML Tunggal untuk Penggayaan Tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!