css权重

最近看到两个很有趣的css权重的东西：

.main{width: 100px;height: 100px;background: blue;}

.main>div{background: red;}

.center{width: 50px;height: 50px;background: yellow;}

我直接认定了就是yellow，实际是red。这其实跟CSS权重有关。面试一问CSS权重的问题，应该百分之99的人随口都能说出：

!important > 行间 > id > class |属性|伪类 > 标签|伪元素 > 通配符*

开发中知道这个其实够了，但是有个比较奇葩的时候就不知道为什么了。其实有很多都不知道为什么，但其实权重是可以计算的：

!important：Infinity

行间：1000

Id：100

class |属性|伪类：10

标签|伪元素：1

通配符*:：0

继承的样式没有优先级

要说明的是，这边的权重不是十进制或者二进制，而是256进制，听说是国外一个工程师用IE详细测试得到的结构。

现在回到一开始的那个，我们可以计算：

.main div{background: red;}权重：10+1=11

.center{width: 50px;height: 50px;background: yellow;}权重10

所以页面显示的是红色。

再比如这个：

div p a{color: yellow;}权重：1+1+1=3

div a{color: blue;}权重：1+1=2

a{color: red}权重：1

test

权重的计算是这样的，样式里面能定位到这个元素的样式，也就是说很多样式规则应用到某一个元素上的时候，每一个的样式权重计算出来，优先高权重的样式，如果权重一样则比较顺序，在后的会覆盖之前的。所以这边显示的是黄色。

比如下面这两个：

.center2 #main2{color: blue}权重：10+100=110

#main1 .center1{color: red}权重：100+10=110

test

权重相等，谁在后面就显示后面的颜色。

大体上css权重就是这样了，可以自己试试看是不是所有的样式都遵循这样的规则。不过这边都没说到伪类选择器，因为css选择器不只是这几个，还有很多我都不会。

最后要注意的是，!important的权重值虽然是正无穷，但其实也是可也计算的，比如正无穷+1，就是要比正无穷大，在计算机中正无穷的值是一个有界的,不是数学上无界的慨念，比如：

span{color: red!important;}权重：Infinity

p span{color: blue!important;}权重：Infinity+1

test

所以颜色显示的是蓝色。

实际开发中，最后到底加载的是哪个样式，是一个相对复杂的问题，还是需要具体去分析，这边分享的也是比较简单基础。