Beregn CSS-specificitet og find ud af, hvilken regel der vinder
Indsæt selectorer for at tælle deres specificitet, eller indsæt CSS og et element for at se den regel, der gælder.
- Kører på din enhed
- Ingen oprettelse
- Virker offline efter et besøg
Browserens standardstile og andre stilark er ikke med. Intet sendes nogen steder hen.
| Selector | Specificitet | Vægt | Kontekst |
|---|
| Regel | Værdi | Specificitet | Lag | Resultat |
|---|
Sådan find ud af, hvilken CSS-regel der vinder
- Vælg en tilstand: tæl selectorer, eller find den vindende regel.
- Indsæt selectorerne, eller CSS'en, HTML'en og egenskaben.
- Læs scoren, eller vinderen og hvorfor hver af de andre regler tabte.
Spørgsmål
Hvordan tælles specificitet?
Hvert id tæller 1,0,0, hver klasse, attribut eller pseudo-klasse 0,1,0, og hvert elementnavn eller pseudo-element 0,0,1. Den universelle selector og :where() tæller ikke med.
Hvordan tæller :is(), :not() og :has()?
De tæller som deres stærkeste argument. Så tæller :is(#a, .b) p som 1,0,1, fordi #a er den stærkeste del inden i :is(). Reglen med :where(#a) p scorer 0,0,1.
Hvorfor taber en regel i et lag til en almindelig regel?
For normale deklarationer slår regler uden for et lag regler i lag. For !important vendes rækkefølgen, så et tidligere lag vinder. En normal style-attribut slår alle normale regler i stilark, og en !important style-attribut slår alle andre !important-regler.
Bliver min CSS sendt nogen steder hen?
Nej. Din browser læser og matcher selectorerne i denne fane, og intet sendes til en server.
Anmeldelser
Ingen anmeldelser endnu. Vær den første.