为何要进行属性值的计算

CSS 用于描述元素的外观

思考一下,在不同的时间段内,元素的外观会不会不同?

会,而且是一定的

但是在同一个时间段内的外观呢,不能不同吧!

也可以这样说:当前的外观,是唯一的

那么便要就要问了,这个唯一的外观是什么模样?

放在 CSS 里说:这个元素的样式如何确定?

答案是:依靠属性值的计算

需要注意的是:每一个元素都附加着全部的属性,其中的每一个属性都要有值


属性值的计算过程

分为四个步骤

  1. 使用唯一值
  2. 使用层叠值
  3. 使用继承值
  4. 使用默认值

使用唯一值时要考虑到所有的样式表

使用层叠值是为了解决有冲突的样式


使用层叠值

  1. 使用这条在更高来源优先权的 样式表 中带有 重要 描述字眼的样式
  2. 使用这条在更高来源优先权的 样式表 中描述的 常规样式
  3. 使用这条 内联样式
  4. 使用这条在更高优先权的 级联层 中带有 重要 描述字眼的样式
  5. 使用这条在更高优先权的 嵌套级联层 中带有 重要 描述字眼的样式
  6. 使用这条在更高优先权的 级联层 中描述的常规样式
  7. 使用这条在更高优先权的 嵌套级联层 中描述的常规样式
  8. 使用这条在更加具体的 规则集 中描述的样式
  9. 使用这条在 源代码 中,位置是否更加靠后的样式

样式表的来源,其优先权高至低的排序结果

重要样式

  • 用户代理样式表中的重要样式先于
  • 用户样式表中的重要样式先于
  • 作者样式表中的重要样式

常规样式

  • 作者样式表中的常规样式先于
  • 用户样式表中的常规样式先于
  • 用户代理样式表中的常规样式

级联层优先权从高到低排序的结果

重要样式

  • 先建级联层中的重要样式先于
  • 后建级联层中的重要样式
  • 未分层样式层中的重要样式

常规样式

  • 未分层样式层中的常规样式先于
  • 后建级联层中的常规样式先于
  • 先建级联层中的常规样式

嵌套级联层优先权从高到低排序的结果

重要样式

  • 先建嵌套级联层中的重要样式先于
  • 后建嵌套级联层中的重要样式先于
  • 未分层嵌套样式层中的重要样式

常规样式

  • 未分层嵌套样式层中的常规样式先于
  • 后建嵌套级联层中的常规样式先于
  • 先建嵌套级联层中的常规样式

级联层的创建方式

一次性创建 多个 具名级联层

创建 单个 具名级联层

创建单个匿名级联层


不在级联层中的样式会集中到 未分层样式层 中,另外

级联层一旦创建,其优先权便会确定


创建 具名级联层 时如果它已存在,不会重复创建

如果之后带有样式,会添加到这个具名级联层中

而匿名级联层因为没有名字,每次创建都是一个新的匿名级联层,另外

嵌套级联层使用点连接来表示



星默
1 声望0 粉丝

寻剑!