Kalkulator specyficzności CSS
Oblicz specyficzność selektorów CSS i sprawdź, który wygrywa.
Kalkulator specyficzności CSS
Wklej jeden lub więcej selektorów CSS, każdy w osobnym wierszu, a to narzędzie obliczy specyficzność każdego jako standardowy trzyczęściowy wynik: ID, klasy (plus atrybuty i pseudo-klasy) oraz elementy (plus pseudo-elementy). Specyficzność określa, która reguła będzie zastosowana przez przeglądarkę, gdy dwa style kierują się na ten sam element i musisz wiedzieć, który wygrywa, lub gdy debugujesz, dlaczego nadpisanie nie działa.
Włącz Podziel listę oddzieloną przecinkami i oblicz każdy selektor na liście, taki jak ".a, .b" na własnym wierszu zamiast łączenia ich w jeden. Posortuj od najsilniejszego zmienia kolejność wyników od największej specyficzności do najmniejszej. Wybierz Tabela dla układu kolumn z podziałem ID, klas i elementów, lub Notacja 0-1-2 dla zwartego wyniku takiego jak "1-0-2" na selektor. Pokaż wyjaśnienie podziału wyświetla, która część każdego selektora — ID, klasa, element — przyczyniła się do wyniku, co jest najszybszym sposobem na dokładne zobaczenie, dlaczego jedna reguła przeważa drugą.
Kalkulator następuje specyfikację CSS Selectors dla trudnych przypadków: :where() zawsze daje wynik zero niezależnie od tego, co jest w środku, podczas gdy :is(), :not() i :has() przejmują specyficzność swojego najbardziej specyficznego argumentu. Selektor zawierający !important jest oflagowany, ponieważ zastępuje normalną kaskadę niezależnie od specyficzności i warto o tym wiedzieć, mimo że nie jest częścią wyniku samego selektora. Końce linii Windows i Unix są traktowane tak samo, a puste linie są ignorowane.
Wszystko działa lokalnie w przeglądarce — selektory, które wklejasz, nigdy nie są nigdzie przesyłane, co jest ważne, jeśli sprawdzasz prywatną bazę kodu. Skopiuj wynik, pobierz go jako plik .txt lub wyślij wynik z powrotem na wejście, aby kontynuować udoskonalanie selektorów.