1 为什么要存在这三种机制(继承、层叠、特指)
在一个较大的样式表中,可能会有很多条规则都选择同一个元素的统一个属性,但是每个属性只能按照一种规则来进行显示,当多种规则应用于同一属性时,该属性到底是选择何种规则呢?为了解决这种冲突,需要确定一个规则的“优先级”。所以,CSS提供了这三种机制
2 继承
后代可以继承祖先的样式,例如,body是所有元素的祖先,所有标签都是他的后代
body {font-family:helvetica,arial,sans-serif;}
那么,文档中的所有元素,无论它在何种层次结构中,都继承这些样式
CSS中有很多属性是可以继承的,其中相当一部分跟文本相关,比如颜色、字体、字号;然而,也有很多CSS属性不能继承,因为继承这些属性没有意义,这些不能继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距等
3 层叠
层叠,是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值
3.1 样式来源
a、浏览器有一个默认的样式表
b、用户可以提供样式表
c、作者样式表(网页设计师写的样式表)
浏览器层叠各个来源样式的顺序:
浏览器会按照上述顺序依次检查每个来源的样式,并在有定义的情况下,更新对每个标签属性值的设定。整个检查更新过程结束后,再将每个标签以最终设定的样式表显示出来,后面的样式会将前面的样式覆盖
3.2 层叠的规则
3.2.1 特指度(specificity)表示一条规则有多明确
计算特指度:
I-C-E
得到一个三位数,但不能单纯地把它当做数字来比较,比如0-1-12与0-2-0相比,0-2-0的特指度更高
3.2.2 声明的权重
p {color:green !important;font-size:12pt;}
空格!important 分号(;)用于加重声明的权重。
加重声明的权重,也就是说,就应用这个样式了~不管是否还有其他优先级更高的样式(慎用~)
3.2.3 层叠的规则
原文:http://www.cnblogs.com/tiantianxiangshang33/p/5053455.html