引言
<style>
p{
color: aquamarine;
}
</style>
<body>
<p>this is a test</p>
</body>
这段代码为 p 设置了一个颜色属性。
难道,这个 p 只有 color 属性吗?
no, no, no! 当然不是!
真实的情况是这个 p 拥有所有属性,但是其他属性都有自己的默认值。
概述
属性值都是有计算顺序的:
- 确定声明值
- 层叠冲突
- 使用继承
- 使用默认值
确定声明值
当我们在样式表style 中书写样式声明时,这个声明会作为 css 属性。
我们自己写的样式也叫作作者样式,而且优先级高于浏览器默认样式。
层叠冲突
.test h1 {
font-size: 12px;
}
h1 {
font-size: 20px;
}
此时通过权重值计算使用哪一条作者样式。
使用继承
如果没有设置特定作者样式,会先检查一下能否继承该属性值,再去使用默认值。