Kalkulačka CSS špecifičnosti
Vypočítajte špecifičnosť CSS selektorov a zistite, ktorý vyhrá.
Kalkulačka CSS špecifičnosti
Vložte jeden alebo viacero CSS selektorov, každý na oddelený riadok, a tento nástroj vypočíta špecifičnosť každého ako štandardný trojčlánkový skóre: ID, triedy (plus atribúty a pseudo-triedy) a prvky (plus pseudo-prvky). Špecifičnosť určuje, ktoré pravidlo prehliadač použije, keď sa dva štýly zacielili na rovnaký prvok a potrebujete vedieť, ktoré vyhrá, alebo keď ladíte, prečo prepísanie nefunguje.
Zapnite Rozdeliť zoznam oddelený čiarkami a vypočítajte každý selektor v zozname ako ".a, .b" na vlastnom riadku namiesto ich kombinácie. Zoradiť od najsilnejšieho preusporiadava výsledky od najvyššej špecifičnosti k najnižšej. Vyberte si Tabuľka pre rozloženie stĺpcov s rozdelením ID, tried a prvkov, alebo Zápis 0-1-2 pre kompaktný skóre ako "1-0-2" na selektor. Zobraziť vysvetlenie rozdelenia uvádza, ktorá časť každého selektora — ID, trieda, prvok — prispela k skóre, čo je najrýchlejší spôsob, ako presne vidieť, prečo jedno pravidlo preváža druhé.
Kalkulačka nasleduje špecifikáciu CSS Selektory pre zložité prípady: :where() vždy skóruje nula bez ohľadu na to, čo je vo vnútri, zatiaľ čo :is(), :not() a :has() nadobúdajú špecifičnosť svojho najšpecifickejšieho argumentu. Selektor obsahujúci !important je označený, pretože preváža normálnu kaskádu bez ohľadu na špecifičnosť a je užitočné vedieť o tom, aj keď nie je súčasťou vlastného skóre selektora. Windows a Unix konce riadkov sú považované za rovnaké a prázdne riadky sa ignorujú.
Všetko sa spúšťa lokálne vo vašom prehliadači — selektory, ktoré vložíte, sa nikdy neuploadujú nikam, čo je dôležité, ak kontrolujete súkromný kódovací základ. Skopírujte výsledok, stiahnite si ho ako .txt súbor alebo pošlite výstup späť na vstup a pokračujte v spresnení selektorov.