jonkemp/inline-css

Selector specificity not working for !important rules

Open

#32 opened on 2016年3月14日

GitHub で見る
 (8 comments) (0 reactions) (0 assignees)JavaScript (80 forks)github user discovery
enhancementhelp wanted

Repository metrics

Stars
 (440 stars)
PR merge metrics
 (PR metrics pending)

説明

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.

コントリビューターガイド