元素CSS属性的优先次序----论特殊性、继承和层叠之间的关联

特殊性 ：

我们知道如果一个元素有两个或多个冲突的属性声明（比如color：red 和color：blue），那么有最高特殊性的声明就会胜出，这里的特殊性是指 选择器的特殊性。

选择器的特殊性由选择器本身的组件确定。特殊性的值表述为4个部分，如：0,0,0,0。

一个选择器的具体特殊性如下确定：

1、对于选择器中给定的各个 ID属性值， 加 0,1,0,0。

2、对于选择器中给定的各个 类属性值、 属性选择或 伪类， 加 0,0,1,0。

3、 对于选择器中给定的各个元素和伪元素，加0,0,0,1。

4、结合符和通配选择器对特殊性没有任何贡献，加0,0,0,0。

（每一个数字都可以加到9，甚至更多，并且可以把它当做一个整数来看，高位的数值越大，特殊性越高）

5、每个内联样式的属性都是1,0,0,0，是最高特殊性。

6、在声明结束分号之前插入！important就是重要声明，重要声明并没有特殊的特殊性，不过要与非重要声明分开考虑，如果一个重要声明和非重要声明冲突，胜出的总是重要声明。

继承：

有些属性能继承，如color；有些属性不能继承，比如大多数的模型属性（包括外边距，内边距，背景，边框）。

1、继承的值没有特殊性，连0的特殊性都没有，因此通俗地说就是，只要明确声明了元素的属性值，它就一定会覆盖继承得到的属性值。
4.1 继承的表现

　　继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

如下代码<div class="div">我是一段红色的文字，可是我的<b>一部分</b>变成了绿色</div>　

.div{color:red;}

b{color:green;}

按照权重的规则，.div的权重为0010，b的权重为0001，应该在一部分上应用红色的，可是由于b的一部分的color继承而来，因此在定义b之前，color的权重实际上为0，因此最后它会应用绿色，即使他们调换顺序也一样。

　　

层叠：

一、按权重和来源排序：

权重大到小：

1、读者的重要声明

2、创作人员的重要声明

3、创作人员的正常声明

4、读者的正常声明

5、用户代理的声明

现在来解释一下， 正常声明是指有特殊性的声明，用户代理也就是浏览器，通常会有一个样式表，比如通常包含以下规则： a:link{color:blue;}  ，

只要创作人员 显示声明了color属性，那么他声明的属性就会覆盖用户代理的默认样式。

但是，由于 继承 的属性 没有特殊性 ，比如<a>如果只有 继承 的color属性，他就会被用户代理样式表中的规则覆盖

二、按特殊性排序：

三、按顺序排序：

一个声明在样式表或文档中越后出现，他的权重越大。如果样式表中有导入的样式表，一般认为导入的样式表中的声明在前，主样式表声明在后。也就是说 权重： 内联>主样式表>导入样式表。

四、非CSS表现提示：

如 font元素，非CSS表现提示被处理为 特殊性0，并出现在创作人员样式表的最前面，这种表现提示 不能被用户代理的样式覆盖，与<a>的color不同，font的继承样式可以影响到<a>。