Den #idvælgeren giver dig mulighed for at målrette et element ved at referere den idHTML-attribut. På samme måde som .klasseattributter er betegnet i CSS med en "periode" ( ) før klassens navn, er ID-attributter forud for en "octothorpe" ( #), mere almindeligt kendt som et "hash" eller "pundtegn".
#header ( /* this is the ID selector */ background: #eee; )ID-attributværdier skal være unikke. HTML med to eller flere identiske ids valideres ikke og giver uforudsigelige resultater. Hvis der er to af de samme, vil CSS stadig matche og style begge dele. JavaScript finder dog den første og stopper, når du spørger efter et ID.
ID-vælgere er ekstremt kraftfulde. De har en meget høj specificitet, generelt skrevet som (0, 1, 0, 0). Styles gælder med dem tilsidesætter andre vælgere, der kun bruger tags eller klasser. At demonstrere:
Et afsnit med både en ID- og klasseattribut gives modstridende CSS-regler; selvom klassevælgeren ( .reusable) er under ID-vælgeren ( #unique) i CSS (det vil generelt tilsidesætte stilarter over den i "kaskaden"), forbliver afsnittet rødt, fordi det #uniqueovervælder den blå farve, der indstilles af .reusable. Et uendeligt antal klasser kan aldrig slå ID'ets specificitet (selvom der var en fejl på et tidspunkt, hvor 256 klasser ville slå et ID).
Høj specificitet og unikhed betyder, at brug #ider en CSS ”nuklear mulighed”: overdrevet, ufleksibel og uforholdsmæssigt effektiv. Undgåelse af #idvælgeren i CSS betragtes som en bedste praksis: det foretrækkes at bruge en klasse i næsten alle tilfælde.
Når det er sagt, har ID-attributter flere værdifulde anvendelser uden for CSS:
- Tilbyder unikke kroge til JavaScript
- Elementer med
idattributter kan målrettes med ankermærker ved at indstillehrefattributten tilidværdien, foran et#symbol. Hvis du klikker på dette ankerlink, fokuseres den aktuelle side på elementet med matchningen igenid. Dette kaldes en "fragmentidentifier". - For virkelig unikke elementer i din HTML, såsom formelementer, kan ID'er være nyttige til ting som at forbinde
labels oginputs.
Interessepunkter
- En gyldig
#idkan ikke starte med et tal og skal have mindst et tegn. En stor del af Unicode er gyldige tegn i enid. idattributter og vælgere er store og små bogstaver og skal nøjagtigt matche på tværs af HTML, CSS og JavaScript
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | Nogen | Nogen | Nogen | Nogen | Nogen | Nogen |