jonkemp/inline-css

Selector specificity not working for !important rules

Open

#32 geöffnet am 14. März 2016

Auf GitHub ansehen
 (8 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (80 Forks)github user discovery
enhancementhelp wanted

Repository-Metriken

Stars
 (440 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

When two selectors match the same element, and both have !important, then the selector specificity is ignored and the last rule wins:

inlineCss('<style>p a {color: red!important} a{color: black!important}</style>  <p><a>test', {url: '/'}).then(s=>console.log(s))
// '<p><a style="color: black;">test</a></p>'
inlineCss('<style>a{color: black!important} p a {color: red!important}</style>  <p><a>test', {url: '/'}).then(s=>console.log(s))
// '<p><a style="color: red;">test</a></p>'

However for the browsers it’s different. No matter which rule goes first, if both have !important in them, the more specific wins.

Contributor Guide

Research-Richtung
Untersuchen Sie, wie inline css mit !important Regeln und Selektorspezifität umgeht. Verfolgen Sie den Codepfad, der widersprüchliche Stile auflöst, insbesondere wenn beide Regeln !important haben. Vergleichen Sie mit dem Browserverhalten.
Tech Stack
javascript
Domain
backend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
JavaScriptCSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70