jonkemp/inline-css
Selector specificity not working for !important rules
Offen
#32 geöffnet am 14.03.2016
enhancementhelp wanted
Repository-Metriken
- Stars
- (438 Sterne)
- PR-Merge-Metriken
- (Keine gemergten PRs in 30 T)
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.