CSS-Selektoren und Spezifität testen

Fügen Sie HTML-Fragment und Selektor ein. Die Treffer hängen von der Browserunterstützung ab; die Übersicht ist keine vollständige Kaskadenanalyse.

Läuft lokal in deinem Browser
Dieses Werkzeug verarbeitet alle Daten lokal in deinem Browser.
HTML-FragmentDas Markup wird in einem isolierten Dokument geparst und weder ausgeführt noch angezeigt.

Einen CSS-Selektor gegen ein HTML-Fragment testen

Fügen Sie ein HTML-Fragment und einen CSS-Selektor ein und drücken Sie Selektor testen. Das Fragment wird in ein getrenntes Dokument geparst, das nie an die Seite angehängt wird, und der Selektor läuft über das querySelectorAll des Browsers: Was hier passt, akzeptiert Ihr Browser.

Die Übersicht zeigt die Spezifität der spezifischsten Gruppe, die Anzahl der Treffer und die Anzahl der durch Kommas getrennten Gruppen. Jeder Treffer erscheint als tag#id.klasse mit den ersten 150 Zeichen seines Textes.

  1. Fügen Sie das Markup ein, das Sie prüfen wollen, oder drücken Sie Beispiel laden für ein Fragment mit main.app, zwei article.card und einem a#download-Link.
  2. Tragen Sie den Selektor im Feld CSS-Selektor ein und drücken Sie Selektor testen. Das Feld enthält bereits .card > a#download.
  3. Lesen Sie die drei Kacheln: Spezifität als a,b,c, Anzahl der Treffer und Anzahl der Selektorgruppen.
  4. Prüfen Sie die Karten. .card > a#download trifft ein Element, a#download.button.primary, und darunter steht sein Text, Download.
  5. Drücken Sie Leeren, um beide Felder zu leeren und die Bereiche zurückzusetzen.

Die Spezifitätsanzeige lesen

Was die Zahlen a,b,c zählen

a zählt ID-Selektoren, b zählt Klassen, Attribute und Pseudoklassen, c zählt Typselektoren und Pseudoelemente. Der Universalselektor zählt null: * ist 0,0,0, .card > a#download ist 1,1,1, ul li::before ist 0,0,3 und [href] ist 0,1,0.

Bei einem Selektor mit Kommas zeigt die Kachel die spezifischste Gruppe, also die Zahl, die der Browser für die Deklarationen dieser Gruppe verwendet: a, #b ergibt 1,0,0. !important, die Reihenfolge von @layer und Vererbung werden hier nicht gewichtet: Es sind Zählwerte, keine Kaskadensimulation.

Fälle, die leicht falsch gezählt werden

:not(), :is() und :has() zählen wie ihr spezifischstes Argument: :is(#a, .b) ist 1,0,0, :not(.a) ist 0,1,0, :where(#a) ist 0,0,0. :nth-child(2 of .a) addiert die Liste nach of und ergibt damit 0,2,0.

Ein escaptes Zeichen bleibt Teil seines Bezeichners, deshalb ist .a\.b eine Klasse (0,1,0), und ein Namensraum-Präfix ist kein Typselektor: svg|circle zählt einen Typ, nicht zwei.

Was dieser Tester nicht sagen kann

Das Fragment wird ohne Stylesheet geparst, es wird also nichts gelayoutet und kein Element hat einen Zustand: p:hover, p:visited und p:focus treffen hier nichts. Skripte im Fragment laufen nicht und Bilder werden nicht geladen.

Die Treffer richten sich nach Ihrem Browser. Chrome lehnt svg|circle und [href i] ab; die Statuszeile zeigt dann genau diese Meldung statt eines Ergebnisses. Lange Fragmente werden vollständig ausgewertet: eine Tabelle mit 400 Zeilen ergab 400 Karten.

Zuletzt verwendet: