ID - Trik CSS | CSS Almanac 2025

The #idpemilih membolehkan anda untuk mensasarkan unsur dengan rujukan yang idatribut HTML. Serupa dengan bagaimana atribut kelas dilambangkan dalam CSS dengan "noktah" ( .) sebelum nama kelas, atribut ID diawali dengan "octothorpe" ( #), lebih dikenal sebagai "hash" atau "tanda paun".

#header ( /* this is the ID selector */ background: #eee; )

Nilai atribut ID mestilah unik. HTML dengan dua atau lebih identik idtidak mengesahkan, dan akan menghasilkan hasil yang tidak dapat diramalkan. Sekiranya terdapat dua yang sama, CSS akan tetap sesuai dan menggayakan kedua-duanya. Walau bagaimanapun, JavaScript, ketika meminta ID, akan mencari yang pertama dan berhenti.

Pemilih ID sangat hebat. Mereka mempunyai kekhususan yang sangat tinggi, umumnya ditulis sebagai (0, 1, 0, 0). Gaya berlaku dengan mereka mengatasi pemilih lain yang hanya menggunakan tag atau kelas. Untuk menunjukkan:

Lihat Pen ini!

Perenggan dengan atribut ID dan class diberikan bertentangan dengan peraturan CSS; walaupun pemilih kelas ( .reusable) berada di bawah pemilih ID ( #unique) dalam CSS (umumnya akan menggantikan gaya di atasnya dalam "kaskade"), ayat tetap merah kerana #uniquemengatasi warna biru yang ditetapkan .reusable. Jumlah kelas yang tidak terbatas tidak pernah dapat mengalahkan kekhususan ID (walaupun terdapat bug pada satu masa di mana 256 kelas akan mengalahkan ID).

Kekhususan dan keunikan yang tinggi bermaksud penggunaan #idadalah "pilihan nuklear" CSS: terlalu berkuasa, tidak fleksibel dan berkesan secara tidak seimbang. Mengelakkan #idpemilih dalam CSS dianggap sebagai amalan terbaik: lebih baik menggunakan kelas dalam hampir semua kes.

Yang dikatakan, atribut ID mempunyai beberapa kegunaan berharga di luar CSS:

Menyediakan cangkuk unik untuk JavaScript
Elemen dengan idatribut dapat disasarkan oleh tag anchor, dengan menetapkan hrefatribut ke idnilai, yang diawali oleh #simbol. Mengklik pautan anchor akan memfokuskan semula halaman semasa pada elemen dengan padanan id. Ini dipanggil "pengecam fragmen".
Untuk elemen yang benar-benar unik dalam HTML anda, seperti elemen bentuk, ID boleh berguna untuk perkara seperti menghubungkan labels dan inputs.

Tempat Menarik

Yang sah #idtidak boleh bermula dengan nombor dan panjangnya sekurang-kurangnya satu aksara. Sebahagian besar Unicode adalah watak yang sah di id.
id atribut dan pemilih peka huruf besar kecil, dan mesti sesuai dengan HTML, CSS dan JavaScript