谈到层叠机制，首先我们要知道什么是声明冲突。

　　声明冲突有三个条件：①多个选择器选中同一个元素；②声明块里的属性相同；③属性的属性值不同。同时满足这三点时就会产生声明冲突。比如下图html代码：

1     <div>
2         <p><span>hello word</span></p>
3     </div>

他的css文件如下：

1 span{
2     color:red;
3 }
4 p>span{
5     color:blue;
6 }
7 div>p>span{
8     color:green;
9 }

此时就会产生声明冲突。

　　浏览器只会挑其中一个选择器中的样式来渲染网页，关于如何挑选就是层叠机制的内容。

　　层叠机制：是一种机制，当发生声明冲突时自动触发，浏览器通过层叠机制解决声明冲突。主要内容为：

　　1、首先比较样式表的优先级。

　　　　样式表的优先级受来源和重要性影响。

　　　　来源：作者样式表>浏览器默认样式表

　　　　重要性：针对作者样式表而言的，有！important>无重要样式声明

　　　　因此作者重要>作者普通>浏览器默认，比如：

1     <div>
2         <p>
3             <span>
4                 <a href="http://www.baidu.com">百度一下</a>
5             </span>
6         </p>
7     </div>
1 a{
2     color: green!important;
3 }
4 
5 a{
6     color:red;
7 }

a标签浏览器默认为蓝色，普通定义了样式为红色，重要样式定义了绿色，因此最终被渲染成绿色。

　　　

　　2.比较特殊性，也叫权重or特指度。

　　　　规则：行内样式>ID选择器>类、伪类、属性选择器>元素、伪元素选择器>通配符选择器

　　　　当发生声明冲突且他们优先级相同时，我们比较特殊性，通过上述规则，我们对每一个样式会产生一个四元数组（a,b,c,d），其中：

　　　　　a：行内样式为1，否则为0

　　　　　b：ID选择器的个数

　　　　　c：类、伪类、属性选择器的个数

　　　　　d：元素、伪元素选择器的个数

　　　　依次从前往后比，大的胜出，一旦胜出，无需再比较之后的数值。例如：

　　页面中的一个a元素：

1     <div class="main">
2         <div>
3             <p id="nav">
4                 <span class="home">
5                     <a href="http://www.baidu.com">百度一下</a>
6                 </span>
7             </p>
8         </div>
9     </div>
 1 /*样式1*/
 2 a{
 3     color: green;
 4 }
 5 /*样式2*/
 6 .foo{
 7     color:yellow;
 8 }
 9 /*样式3*/
10 #bar{
11     color: red;
12 }
13 /*样式4*/
14 .main>div #nav *.home a:link{
15     color:pink;
16 }

样式1:　　0，0，0，1；　

样式2:　　0，0，1，0；

样式3:　　0，1，0，0；

样式4:　　0，1，3，2；　　

 

　　　　3. 比较源次序。当优先级和特殊性都一样时，书写顺序上，后写的会覆盖先写的。

　　以上，就是层叠机制的主要内容。

 

　　以下，写几个常见的误区;

　　误区一：认为ID选择器适用范围最小，因此特殊性最高。这种说法是错的，应该按照“四元数组”法判断。

　　误区二：

1     <div id="bar">
2         <a href="http://www.baidu.com">百度一下</a>
3     </div>
1 /*样式1*/
2 #bar{
3     color: red;
4 }
5 /*样式2*/
6 a{
7     color: green;
8 }

　　认为a标签最后是红色。这里其实样式1和样式2并没有发生声明冲突，由于浏览器中对a元素有默认的样式，作者样式表也写了对a元素的样式，因此没有发生继承。产生声明冲突的是浏览器的默认样式和作者样式表中的样式2，优先级比较知道样式2胜出，无需比较特殊性。

　　　　欢迎补充。