CSS属性值的计算过程
- 一个元素一个元素的依次渲染,顺序按照页面结构的树形目录结构进行
- 渲染每个元素的前提:该元素的所有css属性必须都有值
- 一个元素,从所有属性都没有值,到都有值 的过程叫做属性值的计算过程
过程:
- 确定声明值(包括作者样式表,就是自己写的,还有浏览器默认样式表)
这一步会参考样式表中没有冲突的声明作为css属性值 - 层叠冲突
第一步有冲突的声明,会使用层叠规则确定css属性值-
比较重要性
重要性从高到低:
作者样式表(我们自己写的)中的! importment(不推荐使用)>作者样式表中的普通样式(不加! importment)>浏览器中的默认样式 -
比较特殊性(比较权重).
ID选择器:100
类选择器或伪类选择器:10
元素选择器或属性选择器或伪元素选择器:1
通配符选择器*:0 -
比较源次序
当权重一样时,后面写的会把前面的覆盖掉
-
- 继承
对还没有值的属性,若该属性可以被继承,则继承父元素的 - 使用默认值
对还没有值的属性会使用默认值,如background-color这个属性就不可以被继承,如果前三部都没有确定background-color的属性值就会使用默认值,他的默认值是透明色
例子
.demo{
color: red;
}
<div class="demo">
<a href="">demo</a>
</div>
那么demo的颜色是什么?
分析过程
- 确定声明值
我们自己没有对元素设置color属性,a元素有浏览器默认样式表color: -webkit-link,那么根据规则a元素的color属性值就会为webkit-link
那么第二步层叠冲突,第三部继承,还有第四步就不会执行了,因为第一步a元素的color属性就有值了,就不会继承父元素div的属性值了
如果想要a元素继承父元素的颜色值的话,可以设置
<style>
a{
color:inherit
}
</style>
分析:此时第一步确定声明值就会产生冲突,进入第二步层叠冲突,那么根据规则color的属性值就会是继承父元素的值,根据渲染顺序,此时父元素已经渲染出来,就会从父元素中直接获取color的值,此时是强制继承,第三步的继承就不会发生了