ID - CSS-triki

Anonim

#idIzbirnik omogoča ciljanje element s sklicevanjem na idatribut HTML. Podobno kot so atributi razreda v CSS označeni .z "piko " ( ) pred imenom razreda, imajo atributi ID predpono z "oktoktorjem" ( #), bolj znanim kot "hash" ali "pound sign".

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

Vrednosti atributov ID morajo biti enolične. HTML z dvema ali več enakimi ids ne potrdi in bo prinesel nepredvidljive rezultate. Če sta dva enaka, se CSS še vedno ujema in oblikuje oba. JavaScript pa bo pri poizvedbi za ID našel prvega in se ustavil.

Izbirniki ID so izjemno zmogljivi. Imajo zelo visoko specifičnost, običajno zapisano kot (0, 1, 0, 0). Slogi, ki veljajo z njimi, preglasijo druge izbirnike, ki uporabljajo samo oznake ali razrede. Za prikaz:

Oglejte si to pisalo!

Odstavek z atributom ID in razred je podan v nasprotju s pravili CSS; čeprav je izbirnik razreda ( .reusable) pod izbirnikom ID ( #unique) v CSS-ju (v "kaskadi" na splošno preglasi sloge nad njim), odstavek ostane rdeč, ker preglasi #uniquemodro barvo, ki jo nastavi .reusable. Neskončna količina razredov nikoli ne more premagati specifičnosti ID-ja (čeprav je bila hkrati napaka, ko je 256 razredov premagalo ID).

Visoka specifičnost in edinstvenost pomeni, da #idje uporaba „jedrske možnosti“ CSS: preveč močna, neprilagodljiva in nesorazmerno učinkovita. Izogibanje #idizbirniku v CSS velja za najboljšo prakso: v skoraj vseh primerih je bolje uporabiti razred.

Kot rečeno, imajo atributi ID več dragocenih uporab zunaj CSS:

  • Ponujamo edinstvene kljuke za JavaScript
  • Elemente z idatributi lahko ciljate s sidrnimi oznakami, tako da hrefatribut nastavite na idvrednost, ki ji je predpona #simbola. Če kliknete to sidrno povezavo, boste trenutno stran znova usmerili na element z ujemanjem id. To se imenuje "identifikator fragmenta".
  • Za resnično unikatne elemente v HTML-ju, kot so elementi obrazca, bi lahko bili ID-ji uporabni za stvari, kot so povezave labels in inputs.

Zanimivosti

  • Veljavno #idse ne more začeti s številko in mora biti dolgo vsaj en znak. Velik del Unicode je veljavnih znakov v id.
  • id atributi in izbirniki razlikujejo med velikimi in malimi črkami in se morajo natančno ujemati v HTML, CSS in JavaScript

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Kaj Kaj Kaj Kaj Kaj Kaj Kaj