CSS层叠覆盖原理

在开发网页时，我们往往会遇到CSS样式冲突造成的问题。例如有两个选择器A和B同时作用于一个元素之上，此时，被渲染的元素只会呈现出一个样式给用户，往往我们都认为是后加载的元素的样式生效，难道真的是这样吗？今天就根据自己平时学习与总结给大家讲解一下自己的理解吧。
说到样式覆盖，难免不会提到浏览器的渲染机制，浏览器内核对DOM的加载是一个从上往下的过程，当遇到标签时，会将此链接加到下载队列中进行下载，下载后，会和之前下载的所有的样式重新进行整合，以产生最终生效的样式，具体判断准则有四个维度，分别是

1. !important与内联样式（style标签的）
2. id选择器标记的样式内容
3. 类选择器标记的样式内容
4. 属性选择器标记的样式内容

这四个维度是有优先级的，所以我们将之标记为一个四维的数组，初识时为(0,0,0,0)，对于一个选择器，我们都可以把它转化为对应的这个四维值，例如：

    <div id="idSelector">
        <div class="test1 test2 test3"></div>
    </div>
<style>
/*选择器1*/
.test1.test2.test3 {
    width:40px;
    height:40px;
}
/*选择器2*/
#idSelector div {
    width:50px;
    height:50px;
}
/*选择器3*/
div>.test1.test2.test3  {
    width:60px;
    height:60px;
}
</style>

如上代码中，一共有三个选择器，其对应的权值分别如下：

1. 选择器1:（0，0，3，0）
2. 选择器2:（0，1，0，1）
3. 选择器3:（0，0，3，1）

所以最终生效的选择器是选择器2，即最终元素的大小是50px，而倘若我们希望某个样式强制生效，那么应该怎么处理呢，让我们看如下例子

    <div id="idSelector">
        <div class="test1 test2 test3"></div>
    </div>
<style>
/*选择器1*/
.test1.test2.test3 {
    width:40px !important; 
    height:40px;
}
/*选择器2*/
#idSelector div {
    width:50px;
    height:50px;
}
/*选择器3*/
div>.test1.test2.test3  {
    width:60px;
    height:60px;
}
</style>

最终生效的样式应该如下：

{
  width : 40px;
  height : 50px;
}

为什么呢？相信大家应该很明白了，选择器1的width为!important，为最大权值，但其仅仅作用在一个属性上，并不会作用在一个选择器上，从写法上就可以看出来。