CSS style sheet priority

Original article: http://www.cnblogs.com/lushuicongsheng/archive/2012/07/30/2614756.html

Css2.1 specifies the specificity (specificity) Calculation Method of CSS rules, which is represented by a four-digit numeric string (Note: three digits are used in css2, finally, the priority of CSS is determined based on specificity.
Specific specificity calculation rules:
Add 1, 0, 0, 0 to the style attribute of the element.
Select the identifier (# ID) for each ID, and add 0, 1, 0, and 0.
Each Class Identifier (. Class), each attribute identifier (for example, [ATTR = ""]), and each pseudo class (for example, hover), plus 0, 0, and 1. 0.
Add 0, 0, 0, and 1 to each element or pseudo element (for example, firstchild.
Other delimiters (for example, global delimiters *, sub-delimiters>), plus 0, 0, 0.
Finally, the final specificity value is obtained through the phase-by-phase addition string, which is compared by bit from left to right.
In addition to specificity, there are other rules:
! Important declares more rules than anything else. If! If important declares a conflict, the priority is compared.
If the priorities are the same, the "post-Come" Principle in the source code is used.
The inherited style attributes do not participate in specificity calculation. They are less than all other rules (for example, global selector *).
Sample Analysis:

H1 {color: red ;} /* Only one common element is added. The result is 0, 0, 1 */ Body H1 {color: green ;} /* Add two common elements. The result is 0, 0, 0, 2 */ /* 0, 0, less than 0, 0, the latter wins */ H2.grape {color: Purple ;} /* A common element and a class operator addition result: 0, 0, 1, 1 */ H2 {color: Silver ;} /* A common element. The result is 0, 0, 1 */ /*, Is greater than, and the former wins */ HTML> body table tr [ID = "totals"] TD ul> Li {color: maroon ;} /* Seven common elements, one attribute selector, and two other selector (sub-Selector>). The result is 0, 0 */ Li # answer {color: Navy ;} /* An ID selector and a common selector. The result is 0, 1, 1 */ /*, Is smaller than, and the latter wins */

From http://www.cnblogs.com/Hotcocoa/articles/2104147.html

Speaking of the CSS priority level: two aspects:

The first level is from a macro perspective. The CSS style priority level is

Intra-row style> embedded style (the style written in the style on the page)> link style> Import style> default style of the browser

 

The second layer is a certain stage in the first level of style level. For example, there are five priority rules at the level of embedded style;

Principle 1:The text appears from top to bottom, and the style appears later takes precedence over the same style that appears earlier.

Example:

<Style type = "text/CSS">

. Def1 {Background: black ;}

. Def2 {Background: yellow ;}

</Style>

<Div class = "def2 def1"> Test 1 </div>

Result: All browsers are yellow. Note: they are irrelevant to the order in the class = "quotation marks. def1 and. the order in which def2 is declared ,. the weight declared after def2 is high.

Principle 2:Id Declaration (that is, the style starting with #)> class declaration (that is, the style starting with.)> label Declaration (that is, similar to the style starting with Div)

The preceding three statements are in different magnitude. In terms of weight, the start of a div is equivalent to 1 gram of weight, and the start of a. Statement is equivalent to 1 kilogram of weight. # The start is equivalent to 1 ton of weight.

Example:

<Style type = "text/CSS">

# BB {Background: pink}

. Def {Background: black ;}

Div {Background: yellow ;}

</Style>

<Div id = "BB" class = "def"> Test 2 </div>

Result: All browsers are pink-colored. Note: although priority-based principle 1 is used, the weight displayed later is high, but it is only compared under the same heavyweight, the priority principle 2 varies by weight level.

Priority Principle 3:The number wins. If the same style declaration is a braces {} consisting of multiple #. Or Div, the weight increases by the magnitude of the symbol

For example:# BB # TT # dd {Background: Red}The weight is equal to 3 tons.

# BB. tt ul. dd Li {Background: Red}The weight is equal to 1 ton, 2 kg, and 2 grams. For this precise weight, you do not need to give an example.

Note: priority principle 1 applies only to situations where two style statements are equally heavy

Priority Principle 4:'! Important '. It is equivalent to infinite weight. It has been explained before. Note that in IE, the same style declaration is shown in braces! Important will be washed out by the subsequent style with the same name.

<Style type = "text/CSS">

. Def1 {Background: yellow! Important; Background: red ;}

. Def2 {Background: green ;}

</Style>

<Div class = "def1 def2"> DD </div>

Result: Green, Background: yellow under IE! Important is flushed by the background: Red, while the background: Red and Background: Green are under the priority principle.

Principle 5:Near the water tower. <Div style = "Background: Black"> </div> the style written directly in the element body has the highest priority! (Second only! Important) is described by weight, which can be set to millions of tons.

<Style type = "text/CSS">

. Def1 {Background: red ;}

</Style>

<Div class = "def1" style = "Background: Black"> DD </div>

Result: black.

<Style type = "text/CSS">

. Def1 {Background: red! Important ;}

</Style>

<Div class = "def1" style = "Background: Black"> DD </div>

Result: Red.

<Style type = "text/CSS">

. Def1 {Background: red! Important ;}

</Style>

<Div class = "def1" style = "Background: Black! Important "> DD </div>

Result: black.

 

When talking about the level of style, sometimes it is also related to the browser. The above CSS style priority knowledge is no problem in most cases, but it is not necessarily correct.

For all readers, this is just to give you a relatively correct knowledge of CSS.

From http://blog.csdn.net/qulijian1234/article/details/4365048

Original article: http://www.cnblogs.com/lushuicongsheng/archive/2012/07/30/2614756.html

Css2.1 specifies the specificity (specificity) Calculation Method of CSS rules, which is represented by a four-digit numeric string (Note: three digits are used in css2, finally, the priority of CSS is determined based on specificity.
Specific specificity calculation rules:
Add 1, 0, 0, 0 to the style attribute of the element.
Select the identifier (# ID) for each ID, and add 0, 1, 0, and 0.
Each Class Identifier (. Class), each attribute identifier (for example, [ATTR = ""]), and each pseudo class (for example, hover), plus 0, 0, and 1. 0.
Add 0, 0, 0, and 1 to each element or pseudo element (for example, firstchild.
Other delimiters (for example, global delimiters *, sub-delimiters>), plus 0, 0, 0.
Finally, the final specificity value is obtained through the phase-by-phase addition string, which is compared by bit from left to right.
In addition to specificity, there are other rules:
! Important declares more rules than anything else. If! If important declares a conflict, the priority is compared.
If the priorities are the same, the "post-Come" Principle in the source code is used.
The inherited style attributes do not participate in specificity calculation. They are less than all other rules (for example, global selector *).
Sample Analysis:

H1 {color: red ;} /* Only one common element is added. The result is 0, 0, 1 */ Body H1 {color: green ;} /* Add two common elements. The result is 0, 0, 0, 2 */ /* 0, 0, less than 0, 0, the latter wins */ H2.grape {color: Purple ;} /* A common element and a class operator addition result: 0, 0, 1, 1 */ H2 {color: Silver ;} /* A common element. The result is 0, 0, 1 */ /*, Is greater than, and the former wins */ HTML> body table tr [ID = "totals"] TD ul> Li {color: maroon ;} /* Seven common elements, one attribute selector, and two other selector (sub-Selector>). The result is 0, 0 */ Li # answer {color: Navy ;} /* An ID selector and a common selector. The result is 0, 1, 1 */ /*, Is smaller than, and the latter wins */