jonkemp/inline-css

Selector specificity not working for !important rules

Open

#32 aperta il 14 mar 2016

Vedi su GitHub
 (8 commenti) (0 reazioni) (0 assegnatari)JavaScript (80 fork)github user discovery
enhancementhelp wanted

Metriche repository

Star
 (440 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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.

Guida contributor

Direzione di ricerca
Studia come inline css gestisce le regole !important e la specificità dei selettori. Traccia il percorso del codice che risolve gli stili in conflitto, in particolare quando entrambe le regole hanno !important. Confronta con il comportamento del browser.
Tech stack
javascript
Dominio
backend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
JavaScriptCSS
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70