CSS-Spezifität berechnen und herausfinden, welche Regel gewinnt
Füge Selektoren ein, um ihre Spezifität zu zählen, oder CSS und ein Element, um die gültige Regel zu sehen.
- Läuft auf deinem Gerät
- Keine Anmeldung
- Funktioniert nach einem Besuch offline
Browser-Standardstile und andere Stylesheets sind nicht enthalten. Nichts wird irgendwohin gesendet.
| Selektor | Spezifität | Gewicht | Kontext |
|---|
| Regel | Wert | Spezifität | Layer | Ergebnis |
|---|
So herausfinden, welche CSS-Regel gewinnt
- Wähle einen Modus: Selektoren zählen oder die gewinnende Regel finden.
- Füge die Selektoren ein oder das CSS, das HTML und die Eigenschaft.
- Lies den Wert ab oder die gewinnende Regel und warum jede andere Regel verloren hat.
Fragen
Wie wird die Spezifität gezählt?
Jede ID zählt 1,0,0, jede Klasse, jedes Attribut oder jede Pseudoklasse 0,1,0 und jeder Elementname oder jedes Pseudoelement 0,0,1. Der Universalselektor und :where() zählen nicht mit.
Wie zählen :is(), :not() und :has()?
Sie zählen wie ihr stärkstes Argument. Also hat :is(#a, .b) p die Spezifität 1,0,1, weil #a innerhalb von :is() der stärkste Teil ist. Die Regel mit :where(#a) p hat 0,0,1.
Warum verliert eine Regel in einem Layer gegen eine normale Regel?
Bei normalen Deklarationen schlagen Regeln außerhalb jedes Layers Regeln in Layers. Bei !important dreht sich die Reihenfolge um, sodass ein früherer Layer gewinnt. Ein normales style-Attribut schlägt jede normale Regel aus einem Stylesheet, und ein !important-style-Attribut schlägt jede andere !important-Regel.
Wird mein CSS irgendwohin gesendet?
Nein. Dein Browser liest und vergleicht die Selektoren in diesem Tab, und nichts wird an einen Server gesendet.
Bewertungen
Noch keine Bewertungen. Schreib die erste.