继承(inheritance)是指把一个元素的某些属性值传给其后代的机制。用户既考虑继承、又考虑声明的特指度(specificity),以及声明的来源。这个过程称之为层叠(cascade)。
一、特指度(specificity)
选择符的特指度有选择符本身的组成部分决定。一个特指度值由四部分构成,选择符的特指度通过下述规则确定:
● 选择符中的每个ID属性值加0,1,0,0;
● 选择符中的每个类属性值、属性选择或者伪类加0,0,1,0;
● 选择符中的每个元素和伪元素加0,0,0,1。伪类到底有没有特指度在CSS2中表述的有些自相矛盾,不过CSS2.1明确指出,伪元素有特指度。
● 连接符和通用选择符不增加特指度。
例如,下面给出几个规则中选择符的特指度:
h1 {color: red;} /* 特指度 = 0,0,0,1 */
p em {color: puple;} /* 特指度 = 0,0,0,2 */
.grape {color: purple;} /* 特指度 = 0,0,1,0 */
*.bright {color: yellow;} /* 特指度 = 0,0,1,0 */
p.bright em.dark {color: maroon} /* 特指度 = 0,0,2,2 */
#id216 {color: blue;} /* 特指度 = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* 特指度 = 0,1,1,1 */
特指度是从左向右比较的。特指度1,0,0,0比所有以0开头的特指度大,不管后面的数有多大。同样,0,1,0,1大于0,0,1,7,因为前者位于第二位的1比后者位于第二位的0大。
注:
1. 通用选择符(*)不增加特指度,它的特指度为0,0,0,0;连接符没有特指度,即连零都没有;
2. 行内样式声明的特指度比其他声明都高(1,0,0,0);
3. 有时某个声明可能非常重要,超过其他所有声明。CSS称之为重要声明,这种声明要在声明末尾的分号之前插入!important(important位置必须正确,否则声明讲实效)。
二、 继承(inheritance)
继承指某些样式不仅应用到所指元素上,还应用到元素的后代上。(向上传播特例:应用到body元素上的背景样式会传给HTML元素,此传播仅发生在为body元素定义了背景而没有为html元素定义背景的情况下),继承的值没有特指度。
三、层叠(cascade)
CSS采用层叠机制吧样式组合在一起,CSS层叠规则如下:
- 找到匹配特定元素的所有规则:
- 按显示权重排序应用到特定元素上的所有应用。以!important标记的规则比没有这一标记的权重高;
- 按来源排序应用到特定元素上的所有声明。声明有三个来源:创作人员、读者和用户代理。正常情况下,创作人员编写的样式击败读者提供的样式;读者样式中以!important标记的声明比其他样式权重高,包括创作人员编写的样式中以!important标的的声明;创作人员和读者覆盖用户代理的默认样式;
- 按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重;
- 按声明前后位置排序应用到特定元素上的所有声明。样式表或文档中靠后的声明权重较高。导入的样式表中的声明放在放在当前样式表中所有声明的前面。
注:
- 因为前后位置有影响,所以通常推荐按照一定的顺序编写链接的样式,链接样式的推荐顺序是"link-visited-focus-hover-active"(LVFHA);
- 表现提示(presentational hint),如font元素;这种表现特指度为0,而且认为出现在创作人员编写的样式表开头。表现提示将被创作人员编写的样式或者读者提供的样式覆盖,但不会被用户代理的默认样式覆盖。