ID - CSS Hileleri

Anonim

#idSeçici başvurarak unsurunu hedeflemesine olanak tanır idHTML niteliği. CSS'de sınıf özniteliklerinin .sınıf adından önce bir "nokta" ( ) ile gösterilmesine benzer şekilde , kimlik özniteliklerine bir "oktotorp" ( #) ön eki getirilir , daha yaygın olarak "hash" veya "pound işareti" olarak bilinir.

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

Kimlik özellik değerleri benzersiz olmalıdır. İki veya daha fazla özdeş URL'ye sahip HTML iddoğrulanmaz ve öngörülemeyen sonuçlar üretir. Aynısından iki tane varsa, CSS yine de eşleşecek ve ikisine de stil verecektir. Ancak JavaScript, bir kimlik için sorgulama yaparken ilk ve durağı bulacaktır.

Kimlik seçiciler son derece güçlüdür. Genellikle (0, 1, 0, 0) olarak yazılan çok yüksek bir özgüllükleri vardır. Stiller onlarla birlikte geçerlidir, yalnızca etiketleri veya sınıfları kullanan diğer seçicileri geçersiz kılar. Göstermek:

Bu Kaleme bakın!

Hem ID hem de sınıf özniteliğine sahip bir paragrafa çelişen CSS kuralları veriliyor; CSS'de sınıf seçici ( .reusable) kimlik seçicinin ( #unique) altında olsa da ( genellikle “basamaklı” da üstündeki stilleri geçersiz kılar), paragraf kırmızı kalır çünkü #uniqueayarlanan mavi rengi bastırır .reusable. Sonsuz sayıda sınıf, kimliğin özgüllüğünü asla yenemez (bir seferde 256 sınıfın bir kimliği yeneceği bir hata olsa da).

Yüksek özgüllük ve benzersizlik #id, kullanmanın bir CSS "nükleer seçeneği" olduğu anlamına gelir : aşırı güçlü, esnek olmayan ve orantısız bir şekilde etkili. #idCSS'de seçiciden kaçınmak en iyi uygulama olarak kabul edilir: Neredeyse her durumda bir sınıf kullanmak tercih edilir.

Bununla birlikte, kimlik özelliklerinin CSS dışında birkaç değerli kullanımı vardır:

  • JavaScript için benzersiz kancalar sağlama
  • İle Elemanları idnitelikler ayarlayarak, bağlantı etiketlerine hedeflenebilir hrefiçin niteliğini idbir önek değeri, #sembolü. Bu bağlantı bağlantısına tıklamak, geçerli sayfayı eşleşen öğeye yeniden odaklayacaktır id. Buna "parça tanımlayıcı" denir.
  • Böyle form elemanları gibi HTML'nize gerçekten benzersiz elemanları, için, kimlikleri birbirine bağlayan gibi şeyler için yararlı olabilir labeller ve inputs.

İlgi noktaları

  • Geçerli #idbir sayı ile başlayamaz ve en az bir karakter uzunluğunda olmalıdır. Unicode'un büyük bir kısmı bir id.
  • id öznitelikler ve seçiciler büyük / küçük harfe duyarlıdır ve HTML, CSS ve JavaScript ile tam olarak eşleşmelidir

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Hiç Hiç Hiç Hiç Hiç Hiç Hiç