Preskoči na vsebino

Kalkulator specifičnosti CSS

Izračunaj specifičnost CSS selektorjev in vidi, kateri bo zmagal.

Vhod
Izhod

Kalkulator specifičnosti CSS

Prilepi enega ali več CSS selektorjev, enega na vrstico, in to orodje izračuna specifičnost vsakega kot standardno tridelno oceno: ID-je, razrede (ter atribute in psevdo-razrede) in elemente (ter psevdo-elemente). Specifičnost određuje, katero od nasprotujočih se pravil prikazovalnik uporabi, zato je koristna, kadar dva pravila slogov ciljata isti element in moraš vedeti, katero bo zmagalo, ali kadar odpravljaš, zakaj se prepisovanje ne izvaja.

Vključi Razdeli vejico ločene sezname, da je vsak selektor na seznamu, kot je ".a, .b", ocenjen na lastni vrstici namesto da jih kombiniraš v enega. Razvrsti od najmočnejšega naprej preurediti rezultate od največje specifičnosti k najmanjši. Izberi Tabela za postavitev s stolpci ID-jev, razredov in elementov razbitih ali 0-1-2 zapis za kompakten rezultat, kot je "1-0-2" na selektor. Prikaži razlago razčlenitve navaja, kateri del vsakega selektorja — ID, razred, element — je prispeval k specifičnosti, kar je najhitrejši način da vidis točno, zakaj eno pravilo presega drugo.

Kalkulator sledi specifikaciji CSS Selectors za težje primere: :where() vedno točki nič, ne glede na to, kaj je v njem, medtem ko :is(), :not() in :has() prevzamejo specifičnost svojega najbolj specifičnega argumenta. Selektor, ki vsebuje !important, je označen, ker nadjačuje običajno kaskado, ne glede na specifičnost, in je vredno vedeti, čeprav ni del lastne ocene selektorja. Končki vrstic v Windowsih in Unixu se obravnavajo enako, prazne vrstice pa se ignorirajutejo.

Vse se izvršava lokalno v brskalniku — selektorji, ki jih prilepišz, se nikoli ne pošljejo nikamor, kar je pomembno, če preverjasz proti zasebni bazi kode. Skopiraj rezultat, ga prenesi kot datoteko .txt ali pošlji rezultat nazaj v vhod, da nadaljuješ z izboljšavanjem svojih selektorjev.

FAQ

Kaj pomeni 0-1-2 zapis?
Vsaka številka je raven specifičnosti: prva šteje ID selektorje, druga šteje razrede, atribute in psevdo-razrede, tretja pa šteje elemente in psevdo-elemente. Selektor z višjo prvo številko vedno presega tistega s samo višjo drugo ali tretjo številko.
Kako se točkujejo :not(), :is() in :has()?
Ti psevdo-razredi prevzamejo specifičnost svojega najbolj specifičnega selektorja znotraj oklepajev — :not(.a, #b) doseže toliko kot #b — namesto da dodate svojo težo. :where() je izjema: vedno točki nič, ne glede na to, kako je zapleten seznam selektorjev v njej.
Ali !important vpliva na oceno specifičnosti?
Ne. !important nadjačuje običajno kaskado, ne glede na specifičnost, zato ne spremeni ocene specifičnosti selektorja. Orodje označuje selektorje, ki ga vsebujejo, kot posebno opombo, saj se lahko zlahka spregledajo pri primerjavi pravil.
Kaj se zgodi s vejico ločenim seznamom, kot je ".a, .b"?
Kadar je Razdeli vejico ločene sezname vključen, je vsak selektor na seznamu ocenjen na lastni vrstici, kar sovpada s tem, kako brskalnikt dejansko ocenjuje. Izključi možnost, da oceniš celo vrstico kot en kombiniran selektor.
Je moj CSS nekje naložen?
Ne. Specifičnost se izračuna v celoti v tvojem brskalniku — selektorji, ki jih prilepišz, nikoli ne zapustijo tvojih naprav.