CSS priority calculation rules

The CSS priority consists of four levels (TAG selection, Id selection, class selection, and element selection) and the number of occurrences of each level. The CSS priority is calculated based on the number of occurrences of these four levels.

The CSS priority calculation rules are as follows:
* Add, and 0 to the style defined in the element label.
* Each ID selector (for example, # ID) is added with 0, 1, 0, and 0.
* Each class selector (such as. Class), each attribute selector (such as [attribute =]), and each pseudo class (such as: hover) plus
* Each element selection character (such as P) or pseudo element selection character (such as firstchild), plus 0, 0, 1, 1
Then, accumulate the four numbers to obtain the priority value defined by each CSS,
Then compare the size from left to right, and the priority of CSS styles with large numbers is higher.

Example:
If defined in a CSS file or <style>:
1. H1 {color: red ;}
/* An element selector. The result is 0, 0, 1 */
2. Body H1 {color: green ;}
/* Two Element delimiters. The result is 0, 0, 0, 2 */
3. h2.grape {color: Purple ;}
/* An element selector and a class selector. The result is 0, 0 */
4. Li # answer {color: Navy ;}
/* An element selector and an ID selector. The result is 0, 1, 1 */
If the style attribute of an element is defined as follows:
H1 {color: Blue ;}
/* Defined in the element label. An element selector returns */

In this case, the H1 element is blue.
Note:
1 ,! The important declaration has the highest style priority. If a conflict occurs, the calculation is performed.
2. If the priorities are the same, select the final style.
3. The inherited style has the lowest priority.

 

Http://blog.csdn.net/goplay122/article/details/6084441