Sări la conținut

Calculator de specificitate CSS

Calculează specificitatea selectorilor CSS și vezi care are prioritate.

Intrare
Ieșire

Calculator de specificitate CSS

Lipește unul sau mai mulți selectori CSS, unul pe linie, și această unealtă calculează specificitatea fiecăruia ca scor standard cu trei părți: ID-uri, clase (plus atribute și pseudo-clase) și elemente (plus pseudo-elemente). Specificitatea determină care regulă conflictuală aplică browserul, deci este utilă când două reguli de stil vizează același element și trebuie să știi care are prioritate, sau când depanezi de ce o substituire nu funcționează.

Activează Împarte liste separate de virgule pentru a puncta fiecare selector dintr-o listă cum ar fi ".a, .b" pe o linie separată în loc să le combini în una singură. Ordonează după cel mai puternic reordonează rezultatele de la cea mai mare la cea mai mică specificitate. Alege Tabel pentru o dispoziție de coloane cu ID-uri, clase și elemente detaliate, sau Notație 0-1-2 pentru un scor compact cum ar fi "1-0-2" pe selector. Afișează explicația detaliilor listează care parte din fiecare selector — un ID, o clasă, un element — a contribuit la scor, cel mai rapid mod de a vedea exact de ce o regulă depășește alta.

Calculatorul urmează specificația Selectorilor CSS pentru cazurile dificile: :where() punctează întotdeauna zero indiferent de ce-i în interior, în timp ce :is(), :not() și :has() preiau specificitatea argumentului lor cel mai specific. Un selector care conține !important este marcat, deoarece anulează cascada normală indiferent de specificitate și merită să știi chiar dacă nu face parte din punctajul selectorului propriu. Terminațiile de linie Windows și Unix sunt tratate la fel, iar liniile goale sunt ignorate.

Tot se execută local în browserul tău — selectorii pe care-i lipești nu sunt niciodată trimiși nicăieri, ceea ce este important dacă verifici o bază de cod privată. Copiază rezultatul, descarcă-l ca fișier .txt, sau trimite rezultatul înapoi la intrare pentru a continua să-ți rafinezi selectorii.

FAQ

Ce înseamnă notația 0-1-2?
Fiecare număr este un nivel de specificitate: primul numără selectori de ID, al doilea numără clase, atribute și pseudo-clase, iar al treilea numără selectori de elemente și pseudo-elemente. Un selector cu un prim număr mai mare depășește întotdeauna unul cu doar un al doilea sau al treilea număr mai mare.
Cum sunt punctate :not(), :is() și :has()?
Aceste pseudo-clase preiau specificitatea selectorului cel mai specific din paranteză — :not(.a, #b) punctează la fel de sus ca #b — mai degrabă decât să adauge greutate proprie. :where() este excepția: punctează întotdeauna zero, oricât de complex ar fi lista de selectori din interior.
Afectează !important punctajul de specificitate?
Nu. !important anulează cascada normală indiferent de specificitate, deci nu schimbă punctajul unui selector. Unealta marchează selectori care-l conțin ca o notă separată, deoarece este ușor de trecut cu vederea la compararea regulilor.
Ce se întâmplă cu o listă separată de virgule cum ar fi ".a, .b"?
Cu Împarte liste separate de virgule activat, fiecare selector din listă este punctat pe linia lui, corespunzând modului în care un browser le evaluează de fapt. Dezactivează opțiunea pentru a puncta toată linia ca un selector combinat în schimb.
CSS-ul meu este încărcat undeva?
Nu. Specificitatea este calculată entirely în browserul tău — selectorii pe care-i lipești nu pleacă niciodată de pe dispozitivul tău.