Apakah Perbezaan Antara Pemilih `id` dan `class` CSS?

Memahami Perbezaan Antara id dan kelas dalam CSS

Sebagai pemula dalam CSS, membezakan antara id dan kelas boleh mengelirukan. Kedua-duanya boleh menggunakan gaya pada elemen HTML, tetapi ia mempunyai tujuan yang berbeza.

Kelas

Kelas digunakan untuk menggunakan set gaya pada berbilang elemen secara konsisten di seluruh halaman web . Ia membolehkan anda mengumpulkan elemen yang berkongsi ciri yang serupa, seperti kelas bernama "ulasan" untuk semua bahagian ulasan atau "butang" untuk semua butang tindakan. Yang penting, elemen boleh mempunyai berbilang kelas yang digunakan serentak, membolehkan anda mentakrifkan gaya yang kompleks.

Id

Id, sebaliknya, digunakan untuk mengenal pasti elemen tunggal dan unik pada halaman. Setiap id mestilah unik dan elemen hanya boleh diberikan satu id. Ini menjadikan id sesuai untuk menggayakan elemen yang hanya hadir sekali, seperti "utama" untuk bekas kandungan utama atau "pengepala" untuk pengepala halaman web.

Bila Gunakan Setiap

Gunakan kelas apabila:

• Anda mahu menggunakan gaya yang serupa untuk berbilang elemen secara konsisten.
• Anda mahu elemen tergolong dalam berbilang kumpulan atau mempunyai berbilang gaya yang digunakan padanya.
• Anda mahu menambah atau mengalih keluar gaya secara dinamik menggunakan JavaScript.

Gunakan id apabila:

• Anda mahu menggayakan satu elemen unik pada halaman.
• Anda perlu menangani elemen tertentu secara langsung menggunakan CSS atau JavaScript.
• Anda ingin membuat pautan ke elemen tertentu pada halaman menggunakan sauh.

Contoh

Dalam kod yang disediakan contoh:

• Menggunakan #main dengan id adalah sesuai jika halaman web anda hanya mengandungi satu kawasan kandungan utama.
• Menggunakan .main dengan kelas akan lebih sesuai jika anda bercadang untuk mempunyai berbilang bahagian dengan penggayaan yang serupa, seperti bar sisi atau pengaki, dalam halaman web yang sama.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Pemilih `id` dan `class` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!