1.继承和层叠
继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑从声明本身的来源。这个过程就叫做层叠(cascade)。
2.CSS特殊性值的计算规则
- 对于选择其中给定的各个ID属性值,加 0, 1, 0, 0
- 对于选择器中给的的各个类属性值、属性选择或伪类,加 0, 0, 1, 0
- 对于选择器中给定的各个元素和伪元素,加 0, 0, 0, 1。
- 结合符和通配选择器对特殊性没有任何贡献
- 内联样式的特殊性为 1, 0, 0, 0
h1 {color: red;} /* specificity = 0, 0, 0, 1 */
p, em {color: red;} /* specificity = 0, 0, 0, 2 */
.grape {color: red;} /* specificity = 0, 0, 1, 0 */
*.grape {color: red;} /* specificity = 0, 0, 1, 0 */
p.bright em.dark {color: red;} /* specificity = 0, 0, 2, 2 */
#id666 {color: red;} /* specificity = 0, 1, 0, 0 */
div#sidebar *[href] {color: red;} /* specificity = 0, 1, 1, 1 */
注意:
通配选择器的特殊性是0, 0, 0, 0,这与根本没有特殊性是有区别的,后续会讲到。
相对来说,结合符则根本没有特殊性,甚至连0特殊性都没有。
声明性与特殊性
一旦确定一个选择器的特殊性,这个值将被授予其所有的相关声明。
如h1, h2.section {color: red; background: black;}
,由于特殊性的缘故,用户代理必须相应地处理这个规则,将其"解组"为单独的规则。
h1 {color: red;} /* 0, 0, 0, 1 */
h1 {background: black;} /* 0, 0, 0, 1 */
h2.section {color: red;} /* 0, 0, 1, 1 */
h2.section {background: black;} /* 0, 0, 1, 1 */
任何情况下,用户代理都会确定那些规则与一个元素匹配,计算出所有相关的声明及其特殊性,确定哪些规则胜出,然后将胜出的规则应用到元素,从而得到应用样式后的结果。每个元素、选择器和声明上都必须完成这些工作。这个行为是层叠的一个重要部分。
重要性(重要声明)
在声明的结束分号之前插入!important
来标志重要声明。
重要声明并没有特殊的特殊性值。如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。
3.继承与特殊性
基于继承,样式不仅可以应用到指定的元素,还可以应用到它的后代元素。但是要注意继承到后代的样式是没有特殊性的,连0都没有。
所以:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: gray;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>
<!--em继承的gray不存在特殊性,*通配符的特殊性虽然是0但是比没有高-->
今天是<em>周五</em>
</h1>
</body>
</html>
如上所示的代码,我们知道通配选择器的特殊性是0,然而继承根本没有特殊性,所以上面的代码运行结果是”周五“是灰色而不是红色。
4.层叠
CSS2.1的层叠规则
- 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器
- 按显示权重对应到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员、读者和用户代理。正常情况下,创作人员的样式要胜过读者的样式。有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
- 按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
- 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,他的权重就越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在在后。
声明的权重级别
在声明权重方面要考虑从5级,权重由大到小的顺序依次为:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理的声明
按特殊性排序(当声明的权重相同时)
如果向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则要按特殊性排序,最特殊的声明最优先。
LVHA
相同特殊性、来源、权重情况下,越靠后的规则会胜出,内联样式通常被视为位于最后。所以对于link-visited-hover-active的推荐顺序是LVHA,其它的顺序可能不会正常工作。
Comments | NOTHING