extra
1
:
0,0,1,1
beats out
0,0,0,1
. In the third pair, the second rule wins
     because
0,1,0,1
wins out over
0,0,1,7
. In fact, the specificity value
0,0,1,0
will win out over the value
0,0,0,13
.
    This happens because the values are sorted from left to right. A specificity of
1,0,0,0
will win out over any specificity that
     begins with a
0
, no matter what the rest of the
     numbers might be. So
0,1,0,1
wins over
0,0,1,7
because the
1
in
     the first value's second position beats out the second
0
in the second value.
    Declarations and Specificity
    Once the specificity of a selector has been
     determined, the value will be conferred on all of its associated declarations.
     Consider this rule:
h1 {color: silver; background: black;}
    For specificity purposes, the user agent must treat the rule as if it were
     "ungrouped" into separate rules. Thus, the previous example would become:
h1 {color: silver;}
h1 {background: black;}
    Both have a specificity of
0,0,0,1
, and that's
     the value conferred on each declaration. The same splitting-up process happens with a
     grouped selector as well. Given the rule:
h1, h2.section {color: silver; background: black;}
    the user agent treats it as follows:
h1 {color: silver;} /* 0,0,0,1 */
h1 {background: black;} /* 0,0,0,1 */
h2.section {color: silver;} /* 0,0,1,1 */
h2.section {background: black;} /* 0,0,1,1 */
    This becomes important in situations where multiple rules match the same element
     and where some declarations clash. For example, consider these rules:
h1 + p {color: black; font-style: italic;} /* 0,0,0,2 */
p {color: gray; background: white; font-style: normal;} /* 0,0,0,1 */
*.aside {color: black; background: silver;} /* 0,0,1,0 */
    When applied to the following markup, the content will be rendered as shown in Figure 3-1 :

Greetings!

It's a fine way to start a day, don't you think?

There are many ways to greet a person, but the words are not as important as the act
of greeting itself.

Salutations!

There is nothing finer than a hearty welcome from one's fellow man.

Although a thick and juicy hamburger with bacon and mushrooms runs a close second.

    Figure 3-1. How different rules affect a document
    In every case, the user agent determines which rules match an element, calculates
     all of the associated declarations and their specificities, determines which ones win
     out, and then applies the winners to the element to get the styled result. These
     machinations must be performed on every element, selector, and declaration.
     Fortunately, the user agent does it all automatically. This behavior is an important
     component of the cascade, which we will discuss later in this chapter.
    Universal Selector Specificity
    As mentioned earlier, the universal selector does not contribute to the
     specificity of a selector. In other words, it has a specificity of
0,0,0,0
, which is different than having no specificity
     (as we'll discuss in " Inheritance ").
     Therefore, given the following two rules, a paragraph descended from a
div
will be black, but all other elements will be gray:
div p {color: black;} /* 0,0,0,2 */
* {color: gray;} /* 0,0,0,0 */
    As you might expect, this means that the specificity of a selector that contains a
     universal selector along with other selectors is not changed by the presence of the
     universal selector. The following two selectors have exactly the same specificity:
div p /* 0,0,0,2 */
body * strong /* 0,0,0,2 */
    Combinators, by comparison, have no specificity at all—not even zero specificity.
     Thus, they have no impact on a selector's overall specificity.
    ID and Attribute Selector Specificity
    It's important to note the difference in specificity between an ID selector and an
     attribute selector that targets an
id
attribute.
     Returning to the third pair of rules in the example code, we find:
html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7