HTML and CSS Reference
In-Depth Information
Step two:
body h1 {
color: #cccccc;
}
Find all the declarations that match.
h1 {
color: black;
}
Here are all the rule s that
could possibly match the <h1>
element and that co ntain
the color property.
Brow ser
h1 {
color: #efefef;
}
Step three:
h1.blueberry {
color: blue;
}
Now take all your matches, and sort them by
author, reader, browser.
h1 {
color: #efefef;
}
Here we' ve just
reordere d the
rules by author,
then rea der, and
then bro wser.
h1.blueberry {
color: blue;
}
body h1 {
color: #cccccc;
}
h1 {
color: black;
}
Brow ser
Step four:
Now sort the declarations by how specific they are. To do that, we need to
first calculate each specificity score, and then reorder the rules.
h1 {
color: #efefef;
}
h1.blueberry {
color: blue;
}
0 0 1
0 1 1
The ru le with
the bl ueberry
class m oves
to the top
becaus e it has
the hi ghest
specif icity.
0 0 1
0 1 1
h1.blueberry {
color: blue;
}
h1 {
color: #efefef;
}
body h1 {
color: #cccccc;
}
body h1 {
color: #cccccc;
}
0 0 2
0 0 2
h1 {
color: black;
}
h1 {
color: black;
}
0 0 1
0 0 1
Notice that we only sort within the author,
reader, and browser categories. We don't re-sort
the entire list, or else the “body h1” rule would
move above the “h1” rule set by the author.
Search WWH ::




Custom Search