7、CSS权威指南--特指度和层叠
继承是指把一个元素的某些属性值传递给后代的机制。确定应该把哪些值应用到元素上时,用户代理不进要考虑继承,还要考虑声明的特指度,以及声明的来源。这个过程称为层叠。
1、特指度:同一元素可能被多个选择器匹配,当多个选择器中有相同规则时,最终使用哪个选择器的规则,需要用到特指度。
选择符的特指度由选择符本身的组成部分决定。一个特指度值由四个部分构成,例如 0, 0, 0, 0选择符的特指度通过下述规则确定:
a、选择符中的每个 ID 属性值加 0, 1, 0, 0。
b、选择符中的每个类属性值,属性选择或伪类加 0, 0, 1, 0。
c、选择符中的每个元素和伪类元素加 0, 0, 0, 1。
d、连结符和通用选择符不增加特指度。
如:h1 {color: red;} /* 特指度 = 0, 0, 0, 1 */
p em {color: purple;} /* 特指度 = 0, 0, 0, 2 */
特指度1,0,0,0比所有以0开头的特指度大。同理,0,1,0,0 大于0,0,1,7。
2、声明和特指度
选择符的特指度确定之后,其值将赋予关联的每个声明。为了计算特指度,用户代理必须把规则“打散”成单独的规则。
在任何情况下,用户代理都会确定哪些规则与元素匹配,然后找出所有相关的声明,计算格子的特指度,判断哪些规则胜出,再把胜出的规则应用到元素上,得到装饰后的结果。每个元素、选择符、和声明都要精力这一系列操作。这个行为是层叠的重要部分。
3、通用选择符的特指度
是0,0,0,0,即不增加特指度,链接符没有特指度,不是0,0,0,0.而是没有。
4、ID 选择符和 id 属性选择符之间在特指度上是有区别的 。属性与类是同一特指度。
5、行内样式的特指度
目前见到的特指度都以零开头,因此你可能在想,那一位为什么要存在呢?存在必定有用。那一位是为行内样式声明保留的,行内样式声明的特指度比其他声明高。<h1 style="color: red;">我歌且谣</h1>
6、重要性
有时候某个声明可能非常重要,超过其他所有声明, CSS 称之为重要声明。这种声明要在声明末尾的分号之前插入 !important 。
例如: p.dark {color: #333 !important ; } !important 的位置必须正确,否则声明将失效。
带有 !important 的声明对特指度没有影响,但是会与不重要的声明分开处理。其实,所有带 !import 的声明会放在一起,而特指度冲突就在这个范围内解决。同样,重要的声明作为一个整体,其中的冲突使用特指度解决。因此,重要声明和非重要声明冲突时,重要声明始终胜出。
7、继承
特指度对理解声明是如何应用到文档上的很重要,此外,还有一个重要的概念,即继承。继承指某些样式不仅应用到所指的元素上,还应用到元素的后代上。
样式绝不会向上传播,即元素的样式绝不传给祖辈元素。
很多盒模型属性是不继承的,包括外边距,内边距,背景和边框。继承的值没有特指度,连零都没有。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{color: gray;} h1#page-title{color: black;} </style> </head> <body> <h1 id="page-title">终结继承<em>继承</em></h1> <p>因为通用选择符应用于全部元素,而且特指度为零, 所以它声明的颜色 gray 击败继承的颜色 black (由于继承的值根本没有特指度)。 因此,em元素渲染为灰色,而不是黑色 </p> </body> </html>
8、层叠
如果两个特指度相等的规则应用到同一个元素上会发生什么?CSS才用层叠机制把样式组合在一起,即结合继承和特指度的一些规则。
CSS的层叠规则如下:
a、找到匹配特定元素的所有规则。
b、按显示权重排序应用到特定元素上的所有声明。以 !important 标记的规则比没有这一标记的权重高。
c、按来源排序引用到特定元素上的所有声明。声明由三个来源:创作人员、读者和用户代理。正常情况下,创作人员编写的样式击败读者提供的样式;
读者样式中以 !important 标记的声明比其他样式权重高,包括创作人员编写的样式中以 !important 标记的声明比其他样式权重高,
包括创作人员编写的样式中以 !important 标记的声明;创作人员和读者样式覆盖用户代理的默认样式。
d、按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的权重。
e、按声明的前后位置排序应用到特定元素上的所有声明。样式表或文档中靠后的声明权重较高。到如的样式表中的声明放在当前样式表中所有声明的前面。
总结:
在找到特定元素的所有规则后,对显示权重、来源、特指度、声明的前后顺序进行一 一比较,直到得出结果。
在声明的权重上,基本要考虑五个方面。下面按权重从高到低列出:
- 读者提供的样式中以 !important 标记的声明。
- 创作人员编写的样式中以 !important 标记的声明。
- 创作人员编写的常规声明。
- 读者提供的常规声明。
- 用户代理的默认声明。
创作人员通常只需考虑钱四点。
当元素的各声明的显示权重和来源相同,那么按照特指度排序。
如果特指度也相同,那么在样式表中的位置靠后的规则胜出。