“CSS 256 Classes Override One ID”背后的规则是什么？

我最近遇到过这种情况,却无法找到’为什么’？
谁有人解释一下？

请参阅以下示例：http://codepen.io/chriscoyier/pen/lzjqh

解决方法

这是由于浏览器的限制,而不是规范中的错误或浏览器如何实现它.

spec说：

A selector’s specificity is calculated as follows:

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

Selectors inside the negation pseudo-class are counted like any other,but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

浏览器必须将特定值存储为整数以用于计算,并且某些值256会导致溢出,具体取决于浏览器.这通常发生在8位无符号整数中,其最大值为255;再添加一个会导致类级别特异性以某种方式“升级”为ID级别值,使其等于级联中的ID,从而覆盖它.