CSS Weight parsing

CSS Weight parsing

About CSS weights, we need a set of calculation formula to come and go, this is CSS specificity, we call CSS features or extraordinary, it is a measure of CSS value precedence of a standard specific specification into the following:

Specificity with a four-bit digital string (CSS2 is three bits) to represent, more like four levels, the value from left to right, the largest on the left, the first level is greater than the level, there is no binary between the levels, the level can not be exceeded.

contribution value of inheritance or *	0,0,0,0
Each element (label) contribution value is	0,0,0,1
For each class, the pseudo-class contribution value is	0,0,1,0
Each ID contribution value is	0,1,0,0
Each inline style contribution value	1,0,0,0
Each!important contribution value is important	∞ Infinity

Weights can be superimposed.

For example:

div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1

?

?

Attention:

1. There is no binary between digits such as: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0, 0, 1, 0, so there is no case that 10 div can catch a class selector.

1. The inherited weight is 0.

Summarize the priority level:

1. Rules with!important declarations are used.
2. The declaration embedded inside the style attribute of the HTML element.
3. The rule using the ID selector.
4. Rules for class selectors, property selectors, pseudo-elements, and pseudo-class selectors are used.
5. Rules that use the element selector.
6. A rule that contains only one universal selector.
7. The same class selector follows the nearest principle.

总结：权重是优先级的算法，层叠是优先级的表现

CSS Weight parsing