Specificitatea CSS. Ierarhia specificității. Stiluri în linie. ID-uri: #navbar. Clase, atribute și pseudo-clase: :hover, :focus. Elemente și pseudo-elemente: h1, div, :before și :after
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
Dacă există două sau mai multe reguli CSS conflictuale care indică același element, browserul respectă câteva reguli pentru a determina care este cea mai specifică și, prin urmare, câștigă.
Gândiți-vă la specificitate ca punctaj / rang care determină ce declarații de stil sunt aplicate unui element în cele din urmă.
Selectorul universal (*) are specificitate scăzută, în timp ce selectoarele ID sunt foarte specifice!
Notă: Specificitatea este un motiv comun pentru care regulile CSS nu se aplică anumitor elemente, deși credeți că ar trebui.
Ierarhia specificității (Specificity Hierarchy)
Fiecare selector își are locul în ierarhia specificității. Există patru categorii care definesc nivelul de specificitate al unui selector:
Stiluri în linie (Inline styles) - Un stil inline este atașat direct la elementul care urmează să fie stilat. Exemplu: <h1 style = "color: #ffffff;">.
ID-uri (IDs) - Un ID este un identificator unic pentru elementele paginii, cum ar fi #navbar.
Clase, atribute și pseudo-clase - Această categorie include .classes, [attributes] and pseudo-classes, cum ar fi :hover, :focus etc.
Elemente și pseudo-elemente - Această categorie include nume de elemente și pseudo-elemente, cum ar fi h1, div, :before și :after.