Calculează specificitatea CSS și ce regulă câștigă
Lipește selectoare ca să le numeri specificitatea, sau lipește CSS și un element ca să vezi regula care se aplică.
- Rulează pe dispozitivul tău
- Fără înregistrare
- Funcționează offline după o vizită
Stilurile implicite ale browserului și celelalte foi de stil nu sunt incluse. Nimic nu este trimis nicăieri.
| Selector | Specificitate | Pondere | Context |
|---|
| Regulă | Valoare | Specificitate | Strat | Rezultat |
|---|
Cum să afli ce regulă CSS câștigă
- Alege un mod: numără selectoarele sau află regula câștigătoare.
- Lipește selectoarele sau CSS-ul, HTML-ul și proprietatea.
- Citește scorul, sau regula câștigătoare și motivul pentru care celelalte reguli au pierdut.
Întrebări
Cum se calculează specificitatea?
Fiecare id numără 1,0,0, fiecare clasă, atribut sau pseudo-clasă 0,1,0, iar fiecare nume de element sau pseudo-element 0,0,1. Selectorul universal și :where() nu numără deloc.
Cum numără :is(), :not() și :has()?
Contează ca cel mai puternic argument al lor. Astfel, :is(#a, .b) p are scorul 1,0,1, pentru că #a este cea mai puternică parte din :is(). Regula cu :where(#a) p are scorul 0,0,1.
De ce pierde o regulă dintr-un strat în fața uneia simple?
Pentru declarațiile normale, regulile din afara oricărui strat au prioritate față de cele din straturi. Pentru !important ordinea se inversează, deci câștigă un strat anterior. Un atribut style normal bate orice regulă normală din foaia de stil, iar un atribut style cu !important bate orice altă regulă cu !important.
Se trimite CSS-ul meu undeva?
Nu. Browserul tău analizează și potrivește selectoarele în acest tab, iar nimic nu este trimis către un server.
Recenzii
Încă nu sunt recenzii. Fii primul.