*/
li#answer {color: navy;} /* 0,1,0,1 (winner) */
    The ID selector (
#answer
) in the second rule
     contributes
0,1,0,0
to the overall specificity
     ofthe selector. In the first rule, however, the attribute
     selector (
[id="totals"]
) contributes
0,0,1,0
to the overall specificity. Thus, given the
     following rules, the element with an
id
of
meadow
will be green:
#meadow {color: green;} /* 0,1,0,0 */
*[id="meadow"] {color: red;} /* 0,0,1,0 */
    Inline Style Specificity
    So far, we've seen specificities that begin with a
     zero, so you may be wondering why it's there at all. As it happens, that first zero
     is reserved for inline style declarations, which trump any other declaration's
     specificity. Consider the following rule and markup fragment:
h1 {color: red;}

The Meadow Party

    Given that the rule is applied to the
h1
element, you would still probably expect the text of the
h1
to be green. This is what happens in CSS2.1, and it happens because
     every inline declaration has a specificity of
1,0,0,0
.
    This means that even elements with
id
attributes that match a rule will obey the inline style declaration. Let's modify the
     previous example to include an
id
:
h1#meadow {color: red;}

The Meadow Party

    Thanks to the inline declaration's specificity, the text of the
h1
element will still be green.
    Tip
    The primacy of inline style declarationsis new to CSS2.1, and it exists to capture
     the state of web browser behavior at the time CSS2.1 was written. In CSS2, the
     specificity of an inline style declaration was
1,0,0
(CSS2 specificities had three values, not four). In other words,
     it had the same specificity as an ID selector, which would have easily overridden
     inline styles.
    Importance
    Sometimes, a declaration is so important that it outweighs all other
     considerations. CSS2.1 calls these important declarations (for
     obvious reasons) and lets you mark them by inserting
!important
just before the terminating semicolon in a declaration:
p.dark {color: #333 !important; background: white;}
    Here, the color value of
#333
is marked
!important
, whereas the background value of
white
is not. If you wish to mark both
     declarations as important, each declaration will need its own
!important marker
:
p.dark {color: #333 !important; background: white !important;}
    You must place
!important
correctly, or the
     declaration may be invalidated.
!important
always goes at the end of the declaration, just before the
     semicolon. This placement is especially important—no pun intended—when it comes to
     properties that allow values containing multiple keywords, such as
font
:
p.light {color: yellow; font: smaller Times, serif !important;}
    If
!important
were placed anywhere else in the
font
declaration, the entire declaration would
     likely be invalidated and none of its styles applied.
    Declarations that are marked
!important
do not
     have a special specificity value, but are instead considered separately from
     nonimportant declarations. In effect, all
!important
declarations are grouped together, and specificity conflicts
     are resolved relative to each other. Similarly, all nonimportant declarations are
     considered together, with property conflicts resolved using specificity. In any case
     where an important and a nonimportant declaration conflict, the important declaration always wins.
    Figure 3-2 illustrates the result of the
     following rules and markup fragment:
h1 {font-style: italic; color: gray !important;}
.title {color: black; background: silver;}
* {background: black !important;}

NightWing

    Figure 3-2. Important rules always win
    Tip
    Important declarations and their handling are discussed in more detail in
     " The Cascade " later in this
     chapter.

Inheritance
    As important as specificity may be to understanding how
     declarations are applied to a document, another key concept is inheritance.Inheritance is the