CSS-specificitetsräknare
Beräkna specificiteten för CSS-väljare och se vilken som vinner.
CSS-specificitetsräknare
Ange en eller flera CSS-väljare, en per rad, och detta verktyg beräknar specificiteten för varje väljare som en standard tredeltad poäng: ID:n, klasser (plus attribut och pseudo-klasser) och element (plus pseudo-element). Specificitet avgör vilken konfliktande regel en webbläsare tillämpar. Det är användbart när två stilregler riktar sig till samma element och du vill veta vilken som vinner, eller när du felsöker varför en åsidosättning inte fungerar.
Aktivera Dela kommaseparerade listor för att poängsätta varje väljare i en lista som ".a, .b" på sin egen rad istället för att kombinera dem. Sortera efter starkaste först ordnar om resultaten från högsta till lägsta specificitet. Välj Tabell för en kolumnlayout med utdelade ID:n, klasser och element, eller 0-1-2-notation för en kompakt poäng som "1-0-2" per väljare. Visa fördelningsförklaring listar vilken del av varje väljare — ett ID, en klass, ett element — bidrog till poängen. Detta är det snabbaste sättet att se exakt varför en regel överglänser en annan.
Räknaren följer CSS Selectors-specifikationen för knepiga fall: :where() poängsätts alltid till noll oavsett vad som finns inuti den, medan :is(), :not() och :has() tar specificiteten för sitt mest specifika argument. En väljare som innehåller !important flaggas, eftersom den åsidosätter den normala kaskaden oavsett specificitet. Windows- och Unix-radavslut behandlas på samma sätt, och tomma rader ignoreras.
Allt körs lokalt i din webbläsare — väljarna du klistrar in laddas aldrig upp någonstans. Det är viktigt när du kontrollerar mot en privat kodbas. Kopiera resultatet, ladda ned det som en .txt-fil, eller skicka utmatningen tillbaka till inmatningen för att fortsätta att förfina dina väljare.