Oblicz specyficzność CSS i sprawdź, która reguła wygrywa
Wklej selektory, aby policzyć ich specyficzność, albo wklej CSS i element, aby zobaczyć regułę, która się stosuje.
- Działa na Twoim urządzeniu
- Bez rejestracji
- Działa offline po wizycie
Domyślne style przeglądarki i inne arkusze nie są brane pod uwagę. Nic nie jest wysyłane.
| Selektor | Specyficzność | Waga | Kontekst |
|---|
| Reguła | Wartość | Specyficzność | Warstwa | Wynik |
|---|
Jak ustal, która reguła CSS wygrywa
- Wybierz tryb: policz selektory albo znajdź wygrywającą regułę.
- Wklej selektory albo CSS, HTML i właściwość.
- Odczytaj wynik albo zwycięską regułę i powody, dla których pozostałe przegrały.
Pytania
Jak liczona jest specyficzność?
Każdy identyfikator liczy się jako 1,0,0, każda klasa, atrybut lub pseudoklasa jako 0,1,0, a każda nazwa elementu lub pseudoelement jako 0,0,1. Selektor uniwersalny i :where() nie dodają nic do wyniku.
Jak liczone są :is(), :not() i :has()?
Liczą się jako ich najsilniejszy argument. Zatem :is(#a, .b) p ma wynik 1,0,1, bo #a jest najsilniejszą częścią wewnątrz :is(). Reguła z :where(#a) p ma wynik 0,0,1.
Dlaczego reguła w warstwie przegrywa ze zwykłą regułą?
W zwykłych deklaracjach reguły spoza jakiejkolwiek warstwy biją reguły w warstwach. Przy !important kolejność się odwraca, więc wcześniejsza warstwa wygrywa. Zwykły atrybut style bije każdą zwykłą regułę arkusza stylów, a atrybut style z !important bije każdą inną regułę !important.
Czy mój CSS jest gdzieś wysyłany?
Nie. Twoja przeglądarka analizuje i dopasowuje selektory w tej karcie, a nic nie jest wysyłane na serwer.
Opinie
Brak opinii. Bądź pierwszy.