ID - CSS-triki | CSS almanahs 2025

#idSelektors ļauj mērķēt kādu elementu, atsaucoties uz idHTML atribūtu. Līdzīgi tam, kā klases atribūti CSS tiek apzīmēti ar “periodu” ( .) pirms klases nosaukuma, ID atribūti tiek prefiksēti ar “octothorpe” ( #), kas plašāk pazīstami kā “hash” vai “mārciņas zīme”.

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

ID atribūta vērtībām jābūt unikālām. HTML ar diviem vai vairākiem identiskiem ids netiek apstiprināts un radīs neparedzamus rezultātus. Ja ir divi vienādi, CSS joprojām atbilst abiem. Tomēr, vaicājot par ID, JavaScript atrod pirmo un apstājas.

ID atlasītāji ir ārkārtīgi spēcīgi. Viņiem ir ļoti augsta specifika, parasti tos raksta kā (0, 1, 0, 0). Stili, kas tiek lietoti kopā ar tiem, ignorē citus atlasītājus, kuri izmanto tikai tagus vai klases. Demonstrēt:

Pārbaudiet šo pildspalvu!

Tiek piešķirta rindkopa ar gan ID, gan klases atribūtu, kas ir pretrunā ar CSS noteikumiem; Kaut arī klases selektors ( .reusable) #uniqueCSS atrodas zem ID selektora ( ) (tas parasti pārspīlē stilus virs tā “kaskādē”), rindkopa paliek sarkana, jo tā #uniquepārspēj iestatīto zilo krāsu .reusable. Bezgalīgs stundu skaits nekad nevar pārspēt ID specifiku (lai gan vienlaikus bija kļūda, kurā 256 klases pārspēja ID).

Augsta specifika un unikalitāte nozīmē, ka izmantošana #idir CSS “kodolenerģijas iespēja”: pārāk jaudīga, neelastīga un nesamērīgi efektīva. Izvairīšanās no #idselektora CSS tiek uzskatīta par labāko praksi: vēlams gandrīz katrā gadījumā izmantot klasi.

Tas nozīmē, ka ID atribūtiem ir vairākas vērtīgas izmantošanas iespējas ārpus CSS:

Nodrošinot unikālus āķus JavaScript
Elementus ar idatribūtiem var mērķēt ar enkura tagiem, hrefatribūtu iestatot uz idvērtību, kas pievienota ar #simbolu. Noklikšķinot uz šīs enkura saites, pašreizējā lapa tiks atkārtoti koncentrēta uz atbilstošā elementa elementu id. To sauc par “fragmenta identifikatoru”.
Patiešām unikāliem HTML elementiem, piemēram, formas elementiem, ID varētu būt noderīgi, piemēram, labels un inputs saistīšanai .

Apskates vietas

Derīgs #idnevar sākties ar skaitli, un tam jābūt vismaz vienas rakstzīmes garam. Liela Unicode daļa ir derīgas rakstzīmes id.
id atribūti un atlasītāji ir reģistrjutīgi, un tiem precīzi jāatbilst HTML, CSS un JavaScript