关于CSS层叠机制

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

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

     <div>
         <p><span>hello word</span></p>
     </div>

他的css文件如下：

 span{
     color:red;
 }
 p>span{
     color:blue;
 }
 div>p>span{
     color:green;
 }

此时就会产生声明冲突。

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

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

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

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

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

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

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

     <div>
         <p>
             <span>
                 <a href="http://www.baidu.com">百度一下</a>
             </span>
         </p>
     </div>

 a{
     color: green!important;
 }

 a{
     color:red;
 }

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

　　　

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

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

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

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

　　　　　b：ID选择器的个数

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

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

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

　　页面中的一个a元素：

     <div class="main">
         <div>
             <p id="nav">
                 <span class="home">
                     <a href="http://www.baidu.com">百度一下</a>
                 </span>
             </p>
         </div>
     </div>

 /*样式1*/
 a{
     color: green;
 }
 /*样式2*/
 .foo{
     color:yellow;
 }
 /*样式3*/
 #bar{
     color: red;
 }
 /*样式4*/
 .main>div #nav *.home a:link{
     color:pink;
 }

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

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

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

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

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

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

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

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

　　误区二：

     <div id="bar">
         <a href="http://www.baidu.com">百度一下</a>
     </div>

 /*样式1*/
 #bar{
     color: red;
 }
 /*样式2*/
 a{
     color: green;
 }

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

　　　　欢迎补充。