How much specificity do @rules have, like @keyframes and @media?

How special are @rules (such as @keyframes and @media)?

Someone asked me this question recently. My first reaction was: A strange problem! Speciality is about selectors, and @ rules are not selectors, so... doesn't matter?

To prove this, we can use the same selector inside and outside the @ rule to see if it affects the particularity.

 <code>body { background: red; } @media (min-width: 1px) { body { background: black; } }</code>

The background is black. But... is this because media query increases the specificity? Let's exchange order.

 <code>@media (min-width: 1px) { body { background: black; } } body { background: red; }</code>

The background is red, so it's not. The red background wins just because it's back in the style sheet. Media inquiries do not affect particularity.

If it feels like the selector is improving particularity and overwriting other styles with the same selector, it is likely just because it is backward in the stylesheet.

Still, @keyframes in the original question got me thinking. Of course, keyframes can affect the style. Not a particularity, but if the style is finally overwritten, it may feel like a particularity.

Please see this small example:

 <code>@keyframes winner { 100% { background: green; } } body { background: red !important; animation: winner forwards; }</code>

You might think the background should be red, especially if there is a !important rule there. (By the way, !important doesn't affect particularity; it's a matter of rules.) In Firefox it's red, but in Chrome it's green. So this is a strange phenomenon that needs attention. (According to Estelle Weyl, it's been a bug since at least 2014.)

The above is the detailed content of How much specificity do @rules have, like @keyframes and @media?. For more information, please follow other related articles on the PHP Chinese website!