What is the CSS 256 Classes Override One ID rule?

Question

I recently survived this situation, but could not find the "Why"? Can someone explain?

See an example below: http://codepen.io/chriscoyier/pen/lzjqh

Answer 1

This is due to a browser limitation, not a specification error or how the browser implements it.

spec says:

The specificity of the selector is calculated as follows:

• count the number of identifiers in the selector (= a)
• count the number of class selectors, attribute selectors and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in a selector (= c)
• ignore universal selector

Selectors within a pseudo-class of negation count as any other, but negation itself is not considered a pseudo-class.

The concatenation of three abc numbers (in a numerical system with a large base) gives specificity.

Browsers must store specificity values ​​as integers for calculation purposes, and somehow a value of 256 causes an overflow depending on the browser. This usually happens with an 8-bit unsigned integer whose maximum value is 255; adding one more leads to the fact that the specificity of the class level is somehow "updated" to the value of the ID level, making it equal to the ID in the cascade and thereby overlapping it.

Answer 2

All this is explained in the article:

extreme specificity