Relationship between !important and CSS specificity
Looking at the CSS specificity specification, there is no mention about how many "points" the !important
rule is worth.
When does one override another? What happens if one is declared after the other? Which rule is declared to be more important? Is there some sort开发者_Python百科 of pattern?
From the looks of it, !important
applies to what has more specificity points to begin with. But what will happen if I declare a bazillion id's stacked with classes and nested deeply? Will it override the rules set in another, less specified rule marked with !important
?
Specificity in CSS only concerns selectors, not their associated declarations. !important
applies to a declaration, so it alone plays no role in specificity.
However, !important
influences the cascade, which is the overall calculation of styles for a certain element when more than one of the same property declaration applies to it. Or, as Christopher Altman succinctly describes:
!important
is a spades card. It trumps all specificity points.
But not only that: because it influences the cascade overall, if you have more than one !important
selector with a rule containing an !important
declaration matching the same element then selector specificity will continue to apply. Again, this is simply due to having more than one rule applying to the same element.
In other words, for two rules with unequal selectors in the same stylesheet (e.g. same user stylesheet, same internal author stylesheet, or same external author stylesheet), the rules with the most specific selector apply. If there are any !important
styles, the one in the rule with the most specific selector wins. Finally, since you can only have something that's either important or not, that's quite as far as you can go in influencing the cascade.
Here's an illustration of the various uses of !important
and how they're applied:
The
!important
declaration always overrides the one without it (except in IE6 and older):/* In a <style> element */ #id { color: red !important; color: blue; }
If there is more than one
!important
declaration in a rule with the same level of specificity, the later-declared one wins:/* In a <style> element */ #id { color: red !important; color: blue !important; }
If you declare the same rule and the same property in two different places,
!important
follows the cascading order if both declarations are important:/* In an externally-linked stylesheet */ #id { color: red !important; } /* In a <style> element appearing after the external stylesheet */ #id { color: blue !important; /* This one wins */ }
For the following HTML:
<span id="id" class="class">Text</span>
If you have two different rules and one
!important
:#id { color: red; } .class { color: blue !important; }
That
!important
always wins.But when you have more than one
!important
:#id { color: red !important; } .class { color: blue !important; }
The
#id
rule has a more specific selector, so that one wins.
The way I think about it is this:
!important
is a spades card. It trumps all specificity points. To your specific question, the!important
will override a bazillion id/classes.!important
resets the cascade. So, if you use a!important
below another!important
, the second instance rules.
There is a more technical answer out there, but that is how I think about !important
.
One more note, if you are using !important
you need to step back and check if you are doing something wrong. !important
implies you are working against the cascade of CSS. You should use !important
in rare cases.
精彩评论