#hero { background-color: #dbeafe; }\n.banner { background-color: #e2e8f0; }Elementul care are și ID, și clasă păstrează fundalul regulii #hero.
LECȚIA 17 DIN 100
ID-ul bate clasa
Compară specificitatea unui ID cu cea a unei clase.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Componenta ID a specificității este comparată înaintea claselor și tipurilor. Un selector ID potrivit câștigă astfel în fața unei clase normale.
.banner { background-color: #dbeafe; }\n.banner { background-color: #e2e8f0; }Cu doi selectori de clasă identici, al doilea fundal câștigă prin ordine.
PASUL 2 · APLICĂ
Exercițiul tău
Completează regula #hero cu fundalul #dbeafe și păstrează regula .banner după ea.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○#hero are fundalul cerut.
- ○.banner păstrează regula generală.
- ○Regula de clasă apare după ID.
Explică-mi logica rezolvării
ID-ul câștigă prin componenta sa de specificitate, deși clasa este declarată mai târziu.