CSS cascading and specificity

Probably many who are engaged in (layout) and in dense faced with style sheets, there came moments when! Important on! Important was sitting, css turned into a string of long chains, but still someone, somewhere then interrupted (or vice versa). And it is not entirely clear why this is happening.

Let's understand once and for all the cascading styles and the specificity of selectors.

The specificity of selectors determines their priority in the style sheet. The more specific the selector, the higher its priority.
To calculate the priority of the selector is very simple.

• inline-styles have a specificity of 1000
• for each identifier (#) 0100
• for each class (.) and pseudo-class (::, []) 0010
• for each tag and pseudo-element 0001
• * and browser styles 0000

* {box-sizing: border-box} /*  0000 */ li {color:red} /*  0001*/ ul li {color:red} /*  0002*/ .list li {color:red} /*  0011*/ #list li {color:red} /*  0101*/ a[href^="http://"] {text-decoration: underline} /*  0011 */ 

When adding ! Important priority becomes paramount. If! Important a few should think about changing their profession, they begin to obey the same rules.
')

 li {color:red !imporatnt} /*  0001 - win*/ ul li {color:red} /*  0002*/ 

 li {color:red !imporatnt} /*  0001*/ ul li {color:red !imporatnt} /*  0002 - win*/ 

After all the manipulations, the specificity coincided - the last (what is lower) rule wins.

And of course, CSS animations that have higher priority, even than! Important in inline-styles.

UPD Why 11 classes do not have a higher priority over the identifier read here