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>