【CSS】属性计算过程

42 阅读1分钟

引言

<style>
p{
    color: aquamarine;
}
</style>
<body>
<p>this is a test</p>
</body>

这段代码为 p 设置了一个颜色属性。

难道,这个 p 只有 color 属性吗?

no, no, no! 当然不是!

真实的情况是这个 p 拥有所有属性,但是其他属性都有自己的默认值。

image.png

概述

属性值都是有计算顺序的:

  1. 确定声明值
  2. 层叠冲突
  3. 使用继承
  4. 使用默认值

确定声明值

当我们在样式表style 中书写样式声明时,这个声明会作为 css 属性。

我们自己写的样式也叫作作者样式,而且优先级高于浏览器默认样式。

层叠冲突

.test h1 {
    font-size: 12px;
}
h1 {
    font-size: 20px;
}

此时通过权重值计算使用哪一条作者样式。

image.png

使用继承

如果没有设置特定作者样式,会先检查一下能否继承该属性值,再去使用默认值。

使用默认值