Regn ut CSS-spesifisitet og hvilken regel som vinner
Lim inn selektorer for å telle spesifisiteten, eller lim inn CSS og et element for å se regelen som gjelder.
- Kjører på enheten din
- Ingen registrering
- Fungerer frakoblet etter et besøk
Nettleserens standardstiler og andre stilark er ikke med. Ingenting sendes noe sted.
| Selektor | Spesifisitet | Vekt | Kontekst |
|---|
| Regel | Verdi | Spesifisitet | Lag | Resultat |
|---|
Hvordan finn ut hvilken CSS-regel som vinner
- Velg modus: tell selektorer, eller finn vinnerregelen.
- Lim inn selektorene, eller CSS-en, HTML-en og egenskapen.
- Les poengsummen, eller vinneren og hvorfor hver av de andre reglene tapte.
Spørsmål
Hvordan telles spesifisitet?
Hver id teller 1,0,0, hver klasse, attributt eller pseudoklasse 0,1,0, og hvert elementnavn eller pseudoelement 0,0,1. Universalselektoren og :where() teller ikke med.
Hvordan telles :is(), :not() og :has()?
De teller som det sterkeste argumentet sitt. Så :is(#a, .b) p får 1,0,1, fordi #a er den sterkeste delen inni :is(). Regelen med :where(#a) p får 0,0,1.
Hvorfor taper en regel i et lag mot en vanlig regel?
For vanlige deklarasjoner vinner regler utenfor alle lag over regler i lag. For !important snur rekkefølgen, så et tidligere lag vinner. En vanlig style-attributt slår alle vanlige regler i stilark, og en !important style-attributt slår alle andre !important-regler.
Blir CSS-en min sendt noe sted?
Nei. Nettleseren din analyserer og matcher selektorene i denne fanen, og ingenting sendes til en server.
Anmeldelser
Ingen anmeldelser ennå. Bli den første.