简介一下前端CSS选择器的权重值

最近发现一个关于css权重的知识，瞬间解决了很多疑惑，觉得有必要和大家分享一下

在css样式设计时很多时候都是靠权重来设置标签样式，其中一个最大的规律就是各种选择方式的权重大小：

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

但是这就出现一个问题，如果是两两组合的话，就让人分不清权重的优先级了。因为这个权重不仅有一个大小的关系，而且还有一个具体的值的对应关系，同时这个值是可运算的，最重要的一点是这个值不是10进制，是256进制的数据，具体对应关系如下：

!important     ---->   Infinity

行间样式        ---->  1000

id                     ---->   100

class|属性|伪类  ----> 10

标签|伪元素       ---->   1

通配符                ---->  0

//256进制

实例一：

有这么一组标签：

<div class="wrapper" id="only">

        <p  class="wrapper1" id="only1">

        </p>

</div>

假如用下面两种方式来装饰样式，哪个会起作用：

1，#only p{

    background-color:red;

}

2,.wrapper .wrapper1{

    background-color:green;

}

这个时候如果单纯的靠优先级就不太容易判断，这个时候权重值就可以很直接的解决这个问题，首先要知道些在一行的选择器权重值直接相加，虽然值不是10进制，但就一般的情况下，用10进制也很明显的能比较出大小的。

第一种选择方式权重值为：100 +1 =101

第二种选择方式的权重值为：10+10 =20，所以background-color：red;起作用

实例二：

还是上面的标签，选择器改为如下：

1，div#only p{

background-color:red!important;

}

2,.wrapper .wrapper1{

background-color:green!important;

}

第一种选择方式权重值为：1+100 +1 +  Infinity=102 + Infinity

第二种选择方式的权重值为：10+10 + Infinity =20 + Infinity，

这个时候就有一个问题了，当有两个无穷大的权重时，这个如何比较？

在CSS权重值里，无穷大也仅仅是作为一个值来计算，还要继续比较其他的值，也就是说

1 +  Infinity  >   Infinity     所以这里background-color：red;起作用

最后需要补充的一点是，假如两个选择器权重值一样，那么后面的代码就会默认的覆盖前面的代码，也就是后面的代码起作用！！！！