I came across this problem the other day… When you use @layer with !important the precedence gets reverse (that’s ok) but what we see inside the console is very confusing. It looks like a bug but i’m not sure where i could raise it?
So as you can see the reverse precedence show the black background (which is fine) but in the console (both styles tab and computed tab) is showing the original precedence and even striking the black background…
1 Like
Yes, had the same issue! Chrome doesn’t display the right property but Firefox does, but seems like a bug to me, if both properties are set with !important the selector without layers should keeps the highest specificity no ?
In fact it wasn’t a bug (cf MDN documentation of !important) :
Important declarations reverse the order of precedence: important declarations in the first layer take precedence over important declarations in the next layer, and so on. Also, all the important declarations have precedence over important declarations made outside any layer.
Important declarations invert the precedence of current css rules, so the first !important declaration in an @layer will take precedence over css outside the layer and those after (botov2’s in the demo layer in our case, since that’s the declaration that’s supposed to have the least precedence).