03_结构和层叠


1.继承和层叠

继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑从声明本身的来源。这个过程就叫做层叠(cascade)。

2.CSS特殊性值的计算规则

  1. 对于选择其中给定的各个ID属性值,加 0, 1, 0, 0
  2. 对于选择器中给的的各个类属性值、属性选择或伪类,加 0, 0, 1, 0
  3. 对于选择器中给定的各个元素和伪元素,加 0, 0, 0, 1。
  4. 结合符和通配选择器对特殊性没有任何贡献
  5. 内联样式的特殊性为 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的层叠规则

  1. 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器
  2. 按显示权重对应到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员、读者和用户代理。正常情况下,创作人员的样式要胜过读者的样式。有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。
  3. 按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
  4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,他的权重就越大。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在在后。

声明的权重级别

在声明权重方面要考虑从5级,权重由大到小的顺序依次为:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理的声明

按特殊性排序(当声明的权重相同时)

如果向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则要按特殊性排序,最特殊的声明最优先。

LVHA

相同特殊性、来源、权重情况下,越靠后的规则会胜出,内联样式通常被视为位于最后。所以对于link-visited-hover-active的推荐顺序是LVHA,其它的顺序可能不会正常工作。

声明:Hello World|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 03_结构和层叠


Carpe Diem and Do what I like