CSS 渲染樣式優先級（選擇器優先級）

To find the value for an element/property combination, user agents（瀏覽器） must apply the following sorting order:（瀏覽器渲染遵循的規則以下：）

    

     一、Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media  rules containing the declaration and on all links on the path through which the style sheet was reached.

        找到全部樣式

     二、Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

1. user agent declarations（瀏覽器）

2. user normal declarations（瀏覽用戶）

3. author normal declarations（開發人員樣式）

4. author important declarations

5. user important declarations

           按照樣式來源進行優先級排序（升序）

     三、Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

               按選擇器的優先級排序

     四、Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

         以上優先級相同時，後來者居上，可是文檔中 style標籤中的樣式優先級會優先於引入的樣式表。

---

Calculating a selector's specificity

A selector's specificity is calculated as follows:

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

• count the number of ID attributes in the selector (= b)

• count the number of other attributes and pseudo-classes in the selector (= c)

• count the number of element names and pseudo-elements in the selector (= d)

Some examples:

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

附：瀏覽器默認樣式表

http://developer.doyoe.com/default-style/