css权重及计算

一般而言，大多数前端工程师对css样式优先级的概念仅仅停留在下一面一张图上：

注:>表示优先级的一个高低,|表示优先级一样

!important>行间样式>id>class|属性>标签选择器>通配符

但实际上，css是有一个权重的。且是可也计算的，这篇资料不是唯一介绍css权重的，但觉得应该是最通俗的。如图：

注：图中0，1，10，100并不是一个准确的数字，

注意，列：id，100并不是指id的一个权重值就是100，实际上这个100是一个进制数，不是2进制，也不是10进制；而是256进制，就是0到255后+1才是1，列如通配符的权重值0到标签、伪元素的权重值1，中时间实际上差了255。依次类推。

但值得注意的是，！important的权重值虽然是正无穷，但其实也是可也计算的，比如正无穷+1或者*1，就是要比正无穷大，其原理是不管那种语言，在计算机中正无穷的值，都是一个有界的。不是数学上无界的一个慨念。

权重的计算方式：

实际中，最后到底加载的是那一条样式，是一个相对复杂的问题，就简单而言就与引入顺序有关。本文只是最基础的那部分；

总结的比较简陋，本意上是相当于记录笔记了，如有漏写、错误或不恰当之处欢迎指出批评，感谢！本人觉得前端开发人员在处理样式优先级上，记住权重就更可也胜任任何样式优先级的问题了。

标注：1、感谢渡一教育，姬成老师的免费公开课。2、关于css权重值的一个进制，是由一位国外工程师用ie，经过详细测试得到的；