ID vs. Kelas dalam CSS: Bila hendak menggunakan yang mana?

Memahami Perbezaan Antara ID dan Kelas dalam CSS

Dalam CSS, kedua-dua ID dan kelas memainkan peranan penting dalam menggayakan elemen HTML. Walaupun ia kelihatan serupa, terdapat perbezaan asas antara penggunaannya.

Mentakrifkan Perbezaan

• ID (Pengecam): ID adalah unik dalam dokumen . Ia membolehkan anda menyasarkan dan menggayakan elemen tertentu dengan ketepatan yang tiada tandingan.
• Kelas: Tidak seperti ID, kelas boleh digunakan pada berbilang elemen di seluruh dokumen. Ia menyediakan cara untuk menggayakan elemen yang berkongsi ciri atau gaya yang sama.

Bila Menggunakan ID dan Kelas

ID: Gunakan ID apabila anda perlu :

• Gayakan satu elemen unik dalam dokumen, seperti kandungan utama atau bar sisi.
• Nyatakan sasaran individu untuk tindakan tertentu seperti pautan navigasi atau penyerahan borang.

Kelas: Menggunakan kelas apabila anda mahu:

• Gunakan gaya yang sama pada berbilang elemen dengan fungsi yang serupa atau pembentangan.
• Tentukan gaya untuk elemen yang tidak semestinya unik, seperti tajuk, perenggan atau item senarai.
• Buat gaya boleh guna semula yang boleh digunakan dengan mudah pada elemen berbeza mengikut keperluan.

Contoh Penggunaan

Pertimbangkan perkara berikut kod:

#main-content {
  width: 80%;
  background-color: #ccc;
}

.sidebar-item {
  display: flex;
  justify-content: space-between;
}

<div>

Dalam contoh ini, #utama-kandungan ID digunakan pada satu elemen, mengenal pasti ia secara unik. Sebaliknya, kelas .sidebar-item digunakan untuk menggayakan berbilang item bar sisi.

Atas ialah kandungan terperinci ID vs. Kelas dalam CSS: Bila hendak menggunakan yang mana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!