CSS priority issues

About CSS Specificity
CSS specificity features or extraordinary, it is a measure of the precedence of CSS values of a standard, since as a standard, there is a set of relevant rules and calculations, specificity with a four-bit digital string (CSS2 is three bits) to represent, more like four levels, Values from left to right, the largest on the left, a level greater than a level, there is no system between digits, the level can not be exceeded.
When multiple selectors are applied to the same element then the specificity value is higher and the final priority is obtained.
Selector specificity Value list:
Rules:
1. The in-line style priority specificity value is 1,0,0,0, which is higher than the external definition.
such as: <div style= "color:red" >sjweb</div>
External definition refers to rules defined by <link> or <style> tags;
The 2.!important declaration has the highest specificity value;
3.Specificity values in the same case, in the CSS code in the order in which they appear, the latter CSS style;
4. The continuation of the resulting style has no specificity calculation, it is below all other rules (such as the global selector * defined rules).

Algorithm:
When multiple selectors are encountered at the same time
The specificity value obtained by the selector is added to the bits,
{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}
We get the final specificity,
Then compare the trade-offs with a bitwise comparison of the left-to-right order.

Example Analysis:
1.div {font-size:12px;}
Analysis:
1 element {div},specificity value is 0,0,0,1

2.body div P{color:green;}
Analysis:
3 elements {Body div p},specificity value is 0,0,0,3

3.div. sjweb{font-size:12px;}
Analysis:
1 elements {div},specificity value is 0,0,0,1
1 class Selector {. Sjweb},specificity value is 0,0,1, 0
Final: specificity value is 0,0,1,1

4.Div # sjweb {font-size:12px;}
Analysis:
1 elements {div},specificity value is 0,0,0,1
1 class Selector {. Sjweb},specificity value is 0,1,0, 0
Final: specificity value is 0,1,0,1


5.html > Body div [id= "totals"] ul li > P {color:red;}
Analysis:
6 Elements {HTML Body div ul li P} specificity value is 0,0,0,6
1 attribute Selectors {[id= "totals"]} specificity value is 0,0,1,0
2 additional selectors {> >} specificity value is 0,0,0,0
Final: specificity value is 0,0,1,6

!important has the highest priority

CSS priority issues