ID - CSS-gudrybės | CSS almanachas 2025

#idSelektorius leidžia nukreipti elementas su nuoroda į idHTML atributas. Panašiai kaip tai, kaip klasės atributai CSS žymimi „tašku“ ( .) prieš klasės pavadinimą, ID atributai priešais dedami su „octothorpe“ ( #), dažniausiai vadinamu „hash“ arba „pound sign“.

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

ID atributo vertės turėtų būti unikalios. HTML su dviem ar daugiau vienodų ids nepatvirtina ir duos nenuspėjamų rezultatų. Jei yra du vienodi, CSS vis tiek atitiks ir stilius. Tačiau „JavaScript“, pateikdamas užklausą dėl ID, suras pirmąjį ir sustos.

ID selektoriai yra labai galingi. Jie turi labai aukštą specifiškumą, paprastai užrašomi (0, 1, 0, 0). Su jais taikomi stiliai pakeičia kitus selektorius, kurie naudoja tik žymas ar klases. Demonstruoti:

Patikrinkite šį rašiklį!

Pateikiama pastraipa su ID ir klasės atributu, prieštaraujančia CSS taisyklėms; Nors klasės selektorius ( .reusable) #uniqueCSS yra žemiau ID selektoriaus ( ) (jis paprastai pakeis virš jo esančius stilius „kaskadoje“), pastraipa lieka raudona, nes #uniqueužgožia nustatytą mėlyną spalvą .reusable. Be galo daug klasių niekada negali įveikti ID specifiškumo (nors vienu metu buvo klaida, kai 256 klasės įveikė ID).

Didelė specifika ir unikalumas reiškia, kad naudojimas #idyra CSS „branduolinė galimybė“: pernelyg galinga, nelanksti ir neproporcingai efektyvi. #idGeriausia praktika yra vengti selektoriaus CSS: beveik kiekvienu atveju geriau naudoti klasę.

Tai sakant, ID atributai turi keletą vertingų naudojimo būdų ne CSS:

Pateikdami unikalius „JavaScript“ kablius
Elementai su idatributais gali būti taikomi pagal inkaro žymas, nustatant hrefatributą idvertei, prieš kurią nurodomas #simbolis. Spustelėjus tą inkaro nuorodą, dabartinis puslapis bus iš naujo sutelktas į elementą, kuriame yra atitikimas id. Tai vadinama „fragmento identifikatoriumi“.
Tikrai unikaliems HTML elementams, pvz., Formos elementams, ID gali būti naudingi tokiems dalykams kaip, pavyzdžiui, labels ir inputs susiejimas .

Lankytinos vietos

Tinkamas #idnegali prasidėti skaičiumi ir turi būti bent vieno simbolio ilgio. Didelė „Unicode“ dalis yra tinkami simboliai id.
id atributai ir parinkikliai skiria didžiosios ir mažosios raidės ir turi tiksliai atitikti HTML, CSS ir „JavaScript“