Henkilötunnus - CSS-temppuja | CSS-almanakka 2025

#idValitsin voit kohdistaa elementin kääntymällä idHTML määrite. Samoin kuin .luokkamääritteet merkitään CSS: ssä "jaksolla" ( ) ennen luokan nimeä, ID-attribuutteihin lisätään etuliite "oktotorpi" ( #), joka tunnetaan yleisemmin nimellä "hash" tai "pound merkki".

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

ID-määritteen arvojen tulisi olla yksilöllisiä. Kahden tai useamman identtisen ids: n sisältävä HTML-koodi ei kelpaa ja tuottaa arvaamattomia tuloksia. Jos samoja on kaksi, CSS sopii edelleen ja tyyli molemmat. JavaScript, kun haet henkilöllisyystodistusta, löytää ensimmäisen ja lopettaa.

ID-valitsimet ovat erittäin tehokkaita. Niillä on erittäin korkea spesifisyys, yleensä kirjoitettuna (0, 1, 0, 0). Niiden kanssa käytettävät tyylit ohittavat muut valitsimet, jotka käyttävät vain tunnisteita tai luokkia. Näyttää:

Katso tämä kynä!

Kappale, jolla on sekä ID- että class-määrite, annetaan ristiriidassa CSS-sääntöjen kanssa; Vaikka luokan valitsin ( .reusable) on #uniqueCSS: ssä ID-valitsimen ( ) alapuolella (se yleensä ohittaa sen yläpuolella olevat tyylit ”kaskadissa”), kappale pysyy punaisena, koska se ohittaa #uniquesinisen värin, jonka asetat .reusable. Ääretön määrä luokkia ei voi koskaan voittaa henkilöllisyystodistuksen spesifisyyttä (vaikka kerralla oli virhe, jossa 256 luokkaa voitti henkilöllisyystodistuksen).

Suuri spesifisyys ja ainutlaatuisuus tarkoittaa, että käyttö #idon CSS: n "ydinvaihtoehto": ylivoimainen, joustamaton ja suhteettoman tehokas. #idValitsimen välttämistä CSS: ssä pidetään parhaana käytäntönä: luokan käyttäminen on suositeltavaa lähes kaikissa tapauksissa.

Tästä huolimatta ID-määritteillä on useita arvokkaita käyttötapoja CSS: n ulkopuolella:

Ainutlaatuisten koukkujen tarjoaminen JavaScriptille
idMääritteitä sisältäviin elementteihin voidaan kohdistaa ankkuritunnisteilla asettamalla hrefmääritteeksi idarvo, johon on lisätty #symboli. Ankkurilinkin napsauttaminen kohdistaa nykyisen sivun uudelleen elementtiin, jolla on vastaavuus id. Tätä kutsutaan "fragmentin tunnisteeksi".
HTML: n todella ainutlaatuisille elementeille, kuten lomake-elementeille, tunnukset voivat olla hyödyllisiä esimerkiksi labels: ien ja inputs: ien linkittämisessä .

Kiinnostavat paikat

Kelvollinen #idei voi alkaa numerolla, ja sen on oltava vähintään yhden merkin pituinen. Suuri osa Unicodesta on kelvollisia merkkejä id.
id määritteet ja valitsimet erottavat isot ja pienet kirjaimet, ja niiden on vastattava täsmälleen HTML: ää, CSS: ää ja JavaScriptia