eric书：css继承

 As important as specificity （特殊性）may be to understanding how declarations are applied to a document, another key concept is that of inheritance. Inheritance is the mechanism by which styles are applied not only to a specified element, but also to its descendants. If a color is applied to an h1 element, for example, then that color is applied to all text in the h1, even the text enclosed within child elements of that h1:

h1 {color: gray;}


<h1>Meerkat <em>Central</em></h1>

Both the ordinary h1 text and the em text are colored gray because the em element inherits the value of color. If property values could not be inherited by descendant elements, the em text would be black, not gray, and you'd have to color that element separately.

Inheritance also works well with unordered lists. Let's say you apply a style of color: gray; for ul elements:

ul {color: gray;}

You expect that a style that is applied to a ul will also be applied to its list items, and to any content of those list items. Thanks to inheritance, that's exactly what happens。

Inheritance is one of those things about CSS that is so basic that you almost never think about it unless you have to. However, you should still keep a few things in mind.

First, note that some properties are not inherited—generally as a result of simple common sense. For example, the property border (which is used to set borders on elements) does not inherit。

 As it happens, most of the box-model properties—including margins, padding, backgrounds, and borders—are not inherited for the same reason. After all, you wouldn't want all of the links in a paragraph to inherit a 30-pixel left margin from their parent element!

特殊性：

.gradp{
    color:purple;
}
h1{
    color:red;
}

<h1 class="gradp">hellow<em>hello</em></h1>

h1应该是什么颜色呢？答案是.gradp颜色

因为两条规则的特殊性不一样，css规则必须处理这样的情形。特殊性specificity描述了不同规则的相对权重（weight）。
根据规范，一个简单的选择符（比如h1）具有特殊性1，类选择符具有特殊性10，而id选择符具有特殊性100，

权重越高越优先被采用。

Throughout this chapter, we've skirted one rather important issue: what happens when two rules of equal specificity apply to the same element? How does the browser resolve the conflict? For example, say you have the following rules:

h1 {color: red;}

h1 {color: blue;}

Which one wins? Both have a specificity of 0,0,0,1, so they have equal weight and should both apply. That simply can't be the case because the element can't be both red and blue. But which will it be?

Finally the name "Cascading Style Sheets" makes some sense. CSS is based on a method of causing styles to cascade together made possible by combining inheritance and specificity. The cascade rules for CSS2.1 are simple enough:

1. Find all declarations that contain a selector that matches a given element.

2. Sort by explicit weight all declarations applying to the element. Those rules marked !important are given higher weight than those that are not. Also sort by origin all declarations applying to a given element. There are three origins: author, reader, and user agent. Under normal circumstances, the author's styles win out over the reader's styles. !important reader styles are stronger than any other styles, including !important author styles. Both author and reader styles override the user agent's default styles.

3. Sort by specificity all declarations applying to a given element. Those elements with a higher specificity have more weight than those with lower specificity.

4. Sort by order all declarations applying to a given element. The later a declaration appears in the style sheet or document, the more weight it is given. Declarations that appear in an imported style sheet are considered to come before all declarations within the style sheet that imports them.

In order to be perfectly clear about how this all works, let's consider three examples that illustrate the last three of the four cascade rules.

Sorting by Weight and Origin

Under the second rule, if two rules apply to an element, and one is marked !important, the important rule wins out:

p {color: gray !important;}



<p style="color: black;">Well, <em>hello</em> there!</p>

Despite the fact that there is a color assigned in the style attribute of the paragraph, the !important rule wins out, and the paragraph is gray. This gray is inherited by the em element as well.

Furthermore, the origin of a rule is considered. If an element is matched by normal-weight styles in both the author's style sheet and the reader's style sheet, then the author's styles are used. For example, assume that the following styles come from the indicated origins:

p em {color: black;}    /* author's stylesheet */



p em {color: yellow;}   /* reader's stylesheet */

In this case, emphasized text within paragraphs is colored black, not yellow, because normal-weight author styles win out over normal-weight reader styles. However, if both rules are marked !important, the situation changes:

p em {color: black !important;}    /* author's stylesheet */



p em {color: yellow !important;}   /* reader's stylesheet */

Now the emphasized text in paragraphs will be yellow, not black.

As it happens, the user agent's default styles—which are often influenced by the user preferences—are figured into this step. The default style declarations are the least influential of all. Therefore, if an author-defined rule applies to anchors (e.g., declaring them to be white), then this rule overrides the user agent's defaults.

To sum up, in terms of declaration weight, there are five levels to consider. In order of most to least weight, these are:

1. Reader important declarations

2. Author important declarations

3. Author normal declarations

4. Reader normal declarations

5. User agent declarations

Authors typically need to worry about only the first four weight levels, since anything declared will win out over the user agent styles.

Sorting by Specificity

According to the third rule, if conflicting declarations apply to an element and they all have the same weight, they should be sorted by specificity, with the most specific declaration winning out. For example:

p#bright {color: silver;}

p {color: black;}



<p id="bright">Well, hello there!</p>

Given the rules shown, the text of the paragraph will be silver, as illustrated in Figure 3-8. Why? Because the specificity of p#bright (0,1,0,0) overrode the specificity of p (0,0,0,1), even though the latter rule comes later in the style sheet.

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;}

Because its rule comes later in the style sheet, the value of color for all h1 elements in the document will be blue, not red.