属性值的计算过程
1. 一个一个元素依次渲染,顺序按照页面文档的树形目录结构进行
2. 渲染每个元素的前提条件:该元素的所有css属性必须有值。
3. 一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值计算过程
-
确定声明值:参考样式表中没有冲突的声明,直接作为css属性值
-
层叠冲突:对样式表中有冲突的声明使用层叠规则,确定css属性值
- 比较重要性 - 比较特殊性 - 比较原次序
-
使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值
-
对仍然没有值的属性,使用默认值
例:
div {
color: brown;
}
<div>
<a href="">a元素</a> 在第一步有声明值,所以不继承
</div>
<div>
<p>p元素</p>
</div>
但如果设置
a{
color: inherit;
}
则强制继承:即在第一步或者第二部则确定属性值,不会继承
特殊的两个css属性:
- inherit:手动(强制)继承,将父元素的值取出来应用到该元素
- initial:初始值,将该属性设置为默认值
div {
width: 100px;
height: 100px;
background-color: lightblue;
}
.mydiv {
background: initial;
}
<div class="mydiv">
</div>
1. 声明值未确定
2. 层叠冲突确定