Ugrás a tartalomhoz
TextArray1.41.0
100% helyi

CSS specificity kalkulátor

Számítsd ki a CSS szelektorok specificity-jét és nézd meg, melyik nyer.

Bemenet
Kimenet
Kapcsolódó eszközök
CSS-formázóFejlesztői eszközök
CSS-minifikálóFejlesztői eszközök
CSS mértékegység-átváltóFejlesztői eszközök
i18n kulcs diffFejlesztői eszközök
TOML-JSON konverterFejlesztői eszközök
SQL-ről JSON-raFejlesztői eszközök
CSS specificity kalkulátor
Illeszd be egy vagy több CSS szelektort, soronként egyet, és ez az eszköz kiszámítja az egyes szelektorok specificity-jét a szabványos háromrészű pontszám alapján: ID-k, osztályok (valamint attribútumok és pszeudo-osztályok) és elemek (valamint pszeudo-elemek). A specificity határozza meg, hogy a böngésző mely ütköző szabályt alkalmazza, ezért hasznos, ha két stílusszabály ugyanarra az elemre céloz, és tudni szeretné, melyik nyer, vagy ha azt debuggolja, miért nem működik az felülírás.
Kapcsold be a Vesszővel elválasztott listák szétválasztása lehetőséget, hogy az olyan lista minden szelektorát külön sorba értékelje, mint például a ".a, .b", ahelyett, hogy kombinálná őket. A Rendezés a legerösebbtől opció a legmagasabb specificity-ről a legalacsonyabbra rendezi az eredményeket. Válassz Táblázatot az ID-k, osztályok és elemek oszlopokba bontott elrendezéséhez, vagy 0-1-2 jelölést az olyan kompakt pontszámhoz, mint az "1-0-2" szelektoronként. A Részletezés magyarázatának megjelenítése opció felsorolja, hogy az egyes szelektorok mely része — az ID, az osztály, az elem — járult hozzá a pontszámhoz, amely a leggyorsabb módja annak, hogy pontosan lásd, miért van egy szabály előnye a másikkal szemben.
A kalkulátor a CSS Selectors specifikációt követi az összetett esetekhez: :where() mindig nullát ad vissza, függetlenül attól, mi van benne, míg az :is(), :not() és :has() átveszi a legtöbb specifikus argumentumuk specificity-jét. Az !important -t tartalmazó szelektort megjelölik, mivel felülbírálják a normál kaszkádot, függetlenül a specificity-től, és érdemes megjegyezni, még akkor is, ha nem része a szelektoros saját pontszámának. A Windows és Unix sorszakaszok ugyanúgy kezelhetők, és az üres sorok figyelmen kívül hagyódnak.
Mindenki helyileg a böngészőben fut — az Ön által beillesztett szelektorok soha nem kerülnek fel sehová, ami fontos, ha privát kódbázis ellen ellenőrzik. Másolja ki az eredményt, töltse le .txt fájlként, vagy küldje vissza a kimenetet a bemenetre, hogy folyamatosan finomítsa a szelektorokat.
Gyakori kérdések
Mit jelent a 0-1-2 jelölés?
Minden szám egy specificity szint: az első az ID szelektorokat számolja, a második az osztályokat, attribútumokat és pszeudo-osztályokat, és a harmadik az elemet és pszeudo-elem szelektorokat. Az egyik magasabb első számmal rendelkező szelektora mindig megelőzi azt, amelynek csak magasabb második vagy harmadik száma van.
Hogyan értelmeződnek a :not(), :is() és :has()?
Ezek a pszeudo-osztályok felvállalják a legspecifikusabb szelektort a zárójelben — :not(.a, #b) olyan magas, mint az #b — ahelyett, hogy saját súlyt adnának. A :where() kivétel: mindig nullát ad vissza, függetlenül attól, hogy mennyire összetett az azt a szelektort lista.
Befolyásolja az !important a specificity pontszámot?
Nem. Az !important felülbírálódik a normál kaszkád, függetlenül a specificity-től, így nem változtatja meg a szelektoros saját pontszámát. Az eszköz az !important -t tartalmazó szelektorokat külön megjegyzésként jelöli meg, mivel könnyen elsiklható a szabályok összehasonlításakor.
Mi történik egy vesszővel elválasztott listával, például a ".a, .b" -vel?
A Vesszővel elválasztott listák szétválasztása opcióval kapcsolva az egyes szelektorok a lista ayrı sorban vannak értékelve, a böngésző által végzett értékelésnek megfelelően. Kapcsold ki az opciót, hogy az egész sort egyetlen kombinált szelektorként értékelje.
A CSS fel van töltve valahova?
Nem. A specificity teljes mértékben a böngészőben kerül kiszámításra — az Ön által beillesztett szelektorok soha nem hagyják el az eszközt.