Räkna ut CSS-specificitet och vilken regel som vinner
Klistra in selektorer för att räkna ut deras specificitet, eller CSS och ett element för att se vilken regel som gäller.
- Körs på din enhet
- Ingen registrering
- Fungerar offline efter ett besök
Webbläsarens standardstilar och andra formatmallar ingår inte. Inget skickas någonstans.
| Selektor | Specificitet | Vikt | Kontext |
|---|
| Regel | Värde | Specificitet | Lager | Resultat |
|---|
Så här ta reda på vilken CSS-regel som vinner
- Välj läge: räkna selektorer eller hitta den vinnande regeln.
- Klistra in selektorerna, eller CSS:en, HTML:en och egenskapen.
- Läs poängen, eller vinnaren och varför varje annan regel förlorade.
Frågor
Hur räknas specificiteten?
Varje id räknas som 1,0,0, varje klass, attributselektor eller pseudoklass som 0,1,0 och varje elementnamn eller pseudoelement som 0,0,1. Universalselektorn och :where() räknas inte alls.
Hur räknas :is(), :not() och :has()?
De räknas som sitt starkaste argument. Så :is(#a, .b) p får 1,0,1, eftersom #a är den starkaste delen inom :is(). Regeln med :where(#a) p får 0,0,1.
Varför förlorar en regel i ett lager mot en vanlig regel?
För vanliga deklarationer slår regler utanför alla lager regler i lager. För !important vänds ordningen, så ett tidigare lager vinner. Ett vanligt style-attribut slår alla vanliga regler i formatmallar, och ett !important-style-attribut slår alla andra !important-regler.
Skickas min CSS någonstans?
Nej. Din webbläsare tolkar och matchar selektorerna i den här fliken, och ingenting skickas till någon server.
Recensioner
Inga recensioner än. Var först.