Kalkulátor CSS specifičnosti
Vypočítejte specifičnost CSS selektorů a zjistěte, který vyhraje.
Kalkulátor CSS specifičnosti
Vložte jeden nebo více CSS selektorů, každý na samostatný řádek, a tento nástroj vypočítá specifičnost každého jako standardní třídílný skóre: ID, třídy (plus atributy a pseudo-třídy) a prvky (plus pseudo-prvky). Specifičnost určuje, které pravidlo prohlížeč použije, když dva styly cílí na stejný prvek a potřebujete vědět, který vyhraje, nebo když ladíte, proč přepsání nefunguje.
Zapněte Rozdělit seznam oddělený čárkami a vypočítejte každý selektor v seznamu jako ".a, .b" na vlastním řádku místo jejich kombinování. Seřadit podle síly přeuspořádá výsledky od nejvyšší specifičnosti k nejnižší. Vyberte Tabulka pro rozložení sloupců s rozpadem ID, tříd a prvků, nebo Notace 0-1-2 pro kompaktní skóre jako "1-0-2" na selektor. Zobrazit vysvětlení rozdělení uvádí, která část každého selektoru — ID, třída, prvek — přispěla k skóre, což je nejrychlejší způsob, jak přesně vidět, proč jedno pravidlo překonává druhé.
Kalkulátor následuje specifikaci CSS Selectors pro složité případy: :where() vždy skóruje nula bez ohledu na to, co je uvnitř, zatímco :is(), :not() a :has() nabývají specifičnosti svého nejspecifičtějšího argumentu. Selektor obsahující !important je označen, protože překonává normální kaskádu bez ohledu na specifičnost a je užitečné o něm vědět, i když není součástí vlastního skóre selektoru. Konce řádků Windows a Unix jsou považovány za stejné a prázdné řádky se ignorují.
Všechno běží lokálně ve vašem prohlížeči — selektory, které vložíte, se nikdy neuploadují nikam, což je důležité, pokud kontrolujete soukromý základ kódu. Zkopírujte výsledek, stáhněte si jej jako .txt soubor nebo pošlete výstup zpět na vstup a pokračujte v upřesňování selektorů.