Geben Sie einen Selektor pro Zeile ein; kommagetrennte Listen werden pro Selektor aufgeteilt. Ungültige Selektoren werden markiert, Ebenen oder !important entscheiden trotzdem.
Läuft lokal in deinem BrowserJeder Selektor wird mit den drei Zählern der Spezifikation bewertet: A für ID-Selektoren, B für Klassen, Attribute und Pseudoklassen, C für Typselektoren und Pseudoelemente. Die drei Beispiele zeigen die Form des Ergebnisses: #app .card:hover > h2 ergibt 1-2-1, :where(.theme) .card:is(.featured, #hero) ergibt 1-1-0 und main article[data-kind="docs"]::before ergibt 0-1-3.
Die Selektoren werden mit dem Parser des Browsers geprüft und im Tab bewertet; es wird nichts hochgeladen. Die Zeile über der Karte nennt die Anzahl der gelesenen Selektoren und den stärksten; der Kopierblock wiederholt jede Bewertung als Klartext.
A zählt ID-Selektoren wie #app. B zählt Klassenselektoren (.card), Attributselektoren ([data-kind="docs"]) und Pseudoklassen (:hover, :focus-visible, :nth-child(2n+1)). C zählt Typselektoren (main, article, h2) und Pseudoelemente (::before, ::selection). Der Universalselektor * trägt zu keiner Spalte bei.
Funktionale Pseudoklassen folgen der Spezifikation: :where() zählt null, während :is(), :not(), :has() und die of-Liste von :nth-child() mit ihrem schwersten Argument bewertet werden – deshalb ist :is(.featured, #hero) eine ID wert. ::part() und ::slotted() zählen je als ein Pseudoelement, das Argument darin zählt nicht.
Eine kommagetrennte Liste in einer Zeile wird als das behandelt, was sie ist: mehrere Selektoren. a, b wird zu zwei Zeilen mit je 0-0-1. Jede Zeile wird zuerst mit dem Parser des Browsers geprüft; was er ablehnt – ein einzelner Kombinator, ein dreifacher Doppelpunkt – bleibt gelistet, wird als Ungültiger Selektor markiert und fällt aus dem Stärksten-Urteil heraus, denn ein ungültiger Selektor erreicht die Kaskade nie.
Die Bewertung beantwortet eine Frage: Wenn zwei dieser Selektoren dasselbe Element treffen, welche Deklaration gewinnt über das Gewicht. Ebenen, !important, Inline-Stile, Reihenfolge und Scope-Nähe können die Arithmetik trotzdem überstimmen; eine niedrigere Bewertung in einer früheren @layer kann gewinnen.
Der ganze Vergleich läuft im Tab, die Selektoren werden nirgendwohin gesendet. Ein festes Zeilenlimit gibt es nicht; Karte, Urteilszeile und Kopierblock werden beim Tippen gemeinsam neu aufgebaut.
Das Werkzeug vergleicht Text, es wendet Ihr Stylesheet nicht an: nichts wird gegen ein Dokument gematcht, und die Zahlen sind die Gewichte der Spezifikation, keine Vorhersage des berechneten Stils. Für eine visuelle Kontrolle führen Sie den Selektor im Inspektor des Browsers auf der echten Seite aus.