Nem használt CSS-szelektor kereső

Hasonlítsd össze a stíluslapot egy HTML-oldallal, és listázza azokat a szelektorokat, amelyek egyáltalán nem illeszkednek.

Bemenet

HTML

Pszeudo-osztályok és pszeudo-elemek figyelmen kívül hagyásaSzelektorok figyelmen kívül hagyása (regex)HTML-osztályok/azonosítók megjelenítése CSS-szabály nélkülHasznált szelektorok egyezési számának megjelenítése@media-n belüli szelektorok bevonásaKimenet formátuma

Kimenet

Nem használt CSS-szelektor kereső

Illeszd be az egyik oldalra a stíluslapot, a másikra a HTML-t, és ez az eszköz listázza az összes olyan szelektort, amely egyetlen oldalelemen sem illeszkedik. Ez egy gyors módja annak, hogy felfedezhess halott szabályokat egy újratervezés, egy eltávolított komponens vagy hónapok kópiázott CSS-e után — a típusú csomag, amely bosszantó szemmel keresni egy száz szabályos fájlban.

A "Pszeudo-osztályok és pszeudo-elemek figyelmen kívül hagyása" összehasonlítja az olyan szabályt, mint .button:hover egyszerű .button-ként, mivel egy statikus HTML-pillanatkép nem mutathat hover vagy fókuszállapotot. Kapcsold ki, és az eszköz ellenőrzi az olyan biztonságos szabályokat, mint first-child, last-child, nth-child és not az egyes elemek valós pozíciója alapján. A "Szelektorok figyelmen kívül hagyása" vesz egy reguláris kifejezést vagy egy egyszerű szöveges töredéket tartalékként, hogy kizárja azokat az osztályokat, amelyeket egy szkript futás közben váltogat, például minden js- vagy is-active-vel kezdődő osztályok. A "HTML-osztályok/azonosítók megjelenítése CSS-szabály nélkül" megfordítja az összehasonlítást, hasznos az osztálynevekben szereplő tipográfiai hibák elkapásához. A "@media-n belüli szelektorok bevonása" ellenőrzi a médialekérdezés-szabályokat ugyanúgy, mint a többi szabályt, vagy kihagyja azokat, ha ki van kapcsolva. Váltsd a kimenetet "Megtisztított CSS-re", hogy vissza kapd a stíluslapot minden nem használt szabályt eltávolítva.

Az összehasonlítás az írott HTML-struktúra alapján futtatódik — az oldal betöltése után egy szkript által beinjektált jelölés nem van a beillesztett pillanatképben, ezért előtte fájlként kell ellenőrizni. A vesszővel kombinált szelektorok egyénileg ellenőriznek, ezért egy szabály, amely kétszer is lefedi az osztályokat, csak akkor kerül eltávolításra, amikor mindkettő nem használt-ként megerősített.

Mindenez a böngészödben történik: az általad beillesztett CSS és HTML soha nem kerül sehova fel. Másolj le az eredményt, töltsd le txt-fájlként, vagy küldd vissza az inputba egy másik futtatáshoz.

Gyakori kérdések

Ellenőrzi a @media, @supports és @keyframes belsejében található szelektorokat?

A @media-ban lévő szelektorok a többi szabályhoz hasonlóan ellenőriztetnek, lehetőséggel arra, hogy ha szeretnéd, kihagyhatod őket. Más at-rules, például @font-face és @keyframes nem rendelkeznek elemszelektorokkal az összehasonlításhoz, ezért nem módosíthatók.

Meg tudja ragadni a JavaScript által hozzáadott vagy eltávolított osztályokat?

Nem — az illesztést az általad beillesztett HTML ellen végezzük, nem egy élő, scriptelés útján módosított oldal ellen. A "Szelektorok figyelmen kívül hagyása" beállítást használja azoknak az osztályoknak a kizárásához, amelyeket JavaScript váltogat, például is-open vagy js-active, hogy ne jelöljék meg azokat halottként.

Mi történik a kombinátorekkel, mint a gyermek vagy testvér szelektor?

Az eszköz követi a teljes szelektor láncot — leszármazott, gyermek, szomszédos testvér és általános testvér — a beillesztett HTML struktúrája ellen, nem csak a végső osztálynév ellen.

Miért van egy szelektor még mindig felsorolva, mint nem használt, amikor tudom, hogy használt?

Leggyakrabban az azt használó HTML nem lett beillesztve, vagy dinamikusan hozzáadódik az oldal betöltése után. Illeszd be a teljes renderelt jelölést, vagy zárja ki a szelektort a "Szelektorok figyelmen kívül hagyása" beállítással, ha egy szkript alkalmazta.

A CSS vagy HTML-em valahol feltöltés alatt van?

Nem. Az összehasonlítás teljes egészében a böngészödben futtatódik — az általad beillesztett stílarlap és jelölés sem hagyja el az eszközt.

Nem használt CSS-szelektor kereső

Kapcsolódó eszközök

Nem használt CSS-szelektor kereső

Gyakori kérdések