jonkemp/inline-css

Selector specificity not working for !important rules

Open

#32 ouverte le 14 mars 2016

Voir sur GitHub
 (8 commentaires) (0 réactions) (0 assignés)JavaScript (80 forks)github user discovery
enhancementhelp wanted

Métriques du dépôt

Stars
 (440 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

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.

Guide contributeur

Direction de recherche
Étudiez comment inline css gère les règles !important et la spécificité des sélecteurs. Tracez le chemin de code qui résout les styles conflictuels, en particulier lorsque les deux règles ont !important. Comparez avec le comportement du navigateur.
Stack technique
javascript
Domaine
backend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
JavaScriptCSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70