Bereken CSS-specificiteit en zie welke regel wint
Plak selectors om hun specificiteit te tellen, of plak CSS en een element om te zien welke regel geldt.
- Draait op je apparaat
- Geen registratie
- Werkt offline na een bezoek
Standaardstijlen van de browser en andere stylesheets zijn niet inbegrepen. Er wordt niets verstuurd.
| Selector | Specificiteit | Gewicht | Context |
|---|
| Regel | Waarde | Specificiteit | Laag | Resultaat |
|---|
Zo uitzoeken welke CSS-regel wint
- Kies een modus: selectors tellen, of de winnende regel zoeken.
- Plak de selectors, of de CSS, de HTML en de eigenschap.
- Lees de score, of de winnaar en waarom elke andere regel verloor.
Vragen
Hoe wordt specificiteit geteld?
Elke id telt als 1,0,0, elke klasse, elk attribuut of elke pseudo-klasse als 0,1,0, en elke elementnaam of pseudo-element als 0,0,1. De universele selector en :where() tellen niet mee.
Hoe tellen :is(), :not() en :has() mee?
Ze tellen mee als hun sterkste argument. Dus :is(#a, .b) p scoort 1,0,1, omdat #a het sterkste deel binnen :is() is. De regel met :where(#a) p scoort 0,0,1.
Waarom verliest een gelaagde regel van een gewone regel?
Bij gewone declaraties winnen regels buiten elke laag van regels in lagen. Bij !important keert de volgorde om, dus wint een eerdere laag. Een gewoon style-attribuut wint van elke gewone stylesheetregel, en een !important style-attribuut wint van elke andere !important regel.
Wordt mijn CSS ergens naartoe gestuurd?
Nee. Je browser leest en matcht de selectors in dit tabblad, en er wordt niets naar een server gestuurd.
Beoordelingen
Nog geen beoordelingen. Wees de eerste.