css学习2：样式的层叠和继承

1、浏览器样式

浏览器样式(更恰当的名称是用户代理样式)是元素尚未设置样式时浏览器应用在它身上的默认样式。这些样式因浏览器而略有差异，不过大体一致。以a元素（超链接）为例，想想没有特别为它定义样式时浏览器会怎样显示。

2、用户样式

大多数浏览器都允许用户定义自己的样式表。这类样式表中包含的样式称为用户样式。这个功能用的人不多，不过，那些要定义自己的样式表的人往往比较看重这一点，一个特别的原因是这可以让有生理不便的人更容易使用网页。
各种浏览器都有自己管理用户样式的方式。以谷歌的Chrome为例，它会在用户的个人配置信息目录中生成一个名为DefaultUser StyleSheets\Custom.css的文件。添加到这个文件中的任何样式都会被用于用户访问的所有网站，只不过要依下节所讲的层叠规则行事。代码清单4-12所示简例展示了我在自己的Custom.css文件中加入的一条样式。

3、样式如何层叠

浏览器要显示元素时求索一个CSS属性值的次序:

(1)元素内嵌样式(用元素的全局属性style定义的样式);

(2)文档内嵌样式（定义在style元素中的样式);

(3)外部样式（用link元素导入的样式);

(4)用户样式(用户定义的样式);

(5)浏览器样式（浏览器应用的默认样式)。

4、用重要样式调整次序

把样式属性值标记为重要（ important)，可以改变正常的层叠次序。

<style type="text/css">
    a {
        color:black !important;
    }
</style>

无论这种附加后的定义在什么地方，浏览器都会给予优先考虑。

5、根据具体程度和定义次序解决同级样式冲突

如果有两条定义于同一层次的样式都能应用于同一个元素，而且它们都包含着浏览器要查看的CSS属性值，这时就需要另加砝码助天平上持平的双方一决高下。为了判断该用哪个值，浏览器会评估两条样式的具体程度，然后选中较为特殊的那条。样式的具体程度通过统计三类特征得出:

(1)样式的选择器中id值的数目

(2)选择器中其他属性和伪类的数目

(3)选择器中元素名和伪元素的数目

a{
color:black;
}
a.class {
color:white;
}

a.myclass这个选择器含有一个class属性，于是该样式的值为0-1-0 （ 0个id值+1个其他属性+0个元素名)。另一条样式的具体程度值为0-0-0(因为它不包含id值、其他属性或元素名)。因此浏览器在呈现被归入myclass类的a元素时将使用a.myclass样式中设定的color属性值。对于所有其他a元素，使用的则是另一条样式中设定的值。

6、继承

如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的这个样式属性值。

并非所有CSS属性均可继承。这方面有条经验可供参考:与元素外观（文字颜色、字体等）相关的样式会被继承;与元素在页面上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行实施继承，明确指示浏览器在该属性上使用父元素样式中的值。

p{
color:white;
}
span {
border: inherit;
}
<p>
    <span></span>
</p>