ID - CSS-Tricks

Anonim

#idSelector vă permite să direcționați un element prin corelarea idatributul HTML. Similar cu modul în care atributele de clasă sunt denotate în CSS cu .o „punctă” ( #) înainte de numele clasei, atributele ID sunt prefixate cu un „octothorpe” ( ), mai frecvent cunoscut sub numele de „hash” sau „semn de lire sterline”.

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

Valorile atributului ID trebuie să fie unice. HTML cu două sau mai multe ids identice nu se validează și va produce rezultate imprevizibile. Dacă există două aceleași, CSS se va potrivi și stiliza ambele. Cu toate acestea, JavaScript, atunci când solicitați un ID, îl va găsi pe primul și se va opri.

Selectorii ID sunt extrem de puternici. Au o specificitate foarte mare, în general scrisă ca (0, 1, 0, 0). Stilurile se aplică odată cu ele, suprascriu alte selectoare care folosesc doar etichete sau clase. A demonstra:

Verificați acest stilou!

Un paragraf cu atât un ID cât și un atribut de clasă este dat contrar regulilor CSS; chiar dacă selectorul de clasă ( .reusable) este sub selectorul ID ( #unique) din CSS (în general, acesta va suprascrie stilurile de deasupra acestuia în „cascadă”), paragraful rămâne roșu, deoarece #uniquecopleșește culoarea albastră setată de .reusable. O cantitate infinită de clase nu poate bate niciodată specificul ID-ului (deși a existat o eroare la un moment dat în care 256 de clase ar fi învins un ID).

Specificul ridicat și unicitatea înseamnă utilizarea #ideste o „opțiune nucleară” CSS: supraalimentată, inflexibilă și disproporționat de eficientă. Evitarea #idselectorului în CSS este considerată o bună practică: este preferabil să folosiți o clasă în aproape fiecare caz.

Acestea fiind spuse, atributele ID au mai multe utilizări valoroase în afara CSS:

  • Furnizarea de cârlige unice pentru JavaScript
  • Elementele cu idatribute pot fi vizate prin etichete de ancorare, prin setarea hrefatributului la idvaloare, prefixată de un #simbol. Dacă faceți clic pe linkul de ancorare, se va focaliza din nou pagina curentă asupra elementului cu potrivirea id. Acesta se numește „identificator de fragment”.
  • Pentru elemente cu adevărat unice în HTML, cum ar fi elementele de formular, ID-urile ar putea fi utile pentru lucruri precum legarea labels și inputs.

Puncte de interes

  • Un valid #idnu poate începe cu un număr și trebuie să aibă cel puțin un caracter. O mare parte din Unicode sunt caractere valide într-un fișier id.
  • id atributele și selectoarele sunt sensibile la majuscule și minuscule și trebuie să se potrivească exact între HTML, CSS și JavaScript

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Orice Orice Orice Orice Orice Orice Orice