HTML and CSS Reference
In-Depth Information
Given the rules shown, the text of the paragraph will be silver, as illustrated in
Fig-
ure 2-8
. Why? Because the specificity of
p#bright (0,1,0,1)
overrode the specificity of
p (0,0,0,1)
, even though the latter rule comes later in the style sheet.
Figure 2-8. Higher specificity wins out over lower specificity
Sorting by Order
Finally, under the fourth rule, if two rules have exactly the same weight, origin, and
specificity, then the one that occurs later in the style sheet wins out. Therefore, let's
return to our earlier example, where we find the following two rules in the document's
style sheet:
h1 {color: red;}
h1 {color: blue;}
In this case, the value of
color
for all
h1
elements in the document will be
blue
, not
red
. This is because the two rules were tied in terms of weight and specificity, so the
last one declared is the winner.
So what happens if rules from completely separate style sheets conflict? For example,
suppose the following:
@import url(basic.css);
h1 {color: blue;}
What if
h1 {color: red;}
appears in
basic.css
? The entire contents of
basic.css
are
treated as if they were pasted into the style sheet at the point where the import occurs.
Thus, any rule that is contained in the document's style sheet occurs later than those
from the import. If they tie, the document's style sheet contains the winner. Consider
the following:
p em {color: purple;} /* from imported style sheet */
p em {color: gray;} /* rule contained within the document */
In this case, the second rule shown will win out over the imported rule because it was
the last one specified.
For the purposes of this rule, styles specified in the
style
attribute of an element are
considered to be at the end of the document's style sheet, which places them after all
other rules. However, this is a largely academic point, since inline style declarations
always have a higher specificity (
1,0,0,0
) than any style sheet selector could possibly
possess.
