你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

层叠、继承及属性值的计算过程

2021/12/29 16:27:33

目录

层叠

1.比较重要性:

2.比较特殊性:

3.比较源次序

4.应用

继承

属性值的计算过程

1.确定声明值

2.层叠冲突

3.使用继承

4.使用默认值


层叠

声明冲突:同一个样式,多次应用到同一个元素

层叠:解决声明冲突的过程,浏览器的自动处理(权重计算)

1.比较重要性:

重要性从高到低:

1)作者样式表中的!important样式

2)作者样式表中的普通样式

3)浏览器默认样式表中的样式

2.比较特殊性:

总体规则:选择器选中的范围越窄,越特殊

具体规则:通过选择器,计算出一个四位数(****)

1)千位:如果是内联样式,记作1,否则0

2)百位:等于选择器中所有id选择器的数量

3)十位:等于选择器中所有类选择器,属性选择器,伪类选择器的数量

4)个位:等于选择器中所有元素选择器,伪元素选择器的数量

3.比较源次序

代码书写靠后的胜出

4.应用

1)重置样式表:

书写一些作者样式,覆盖浏览器的默认样式

重置样式表是针对浏览器的默认样式

常见的重置样式表:normalize.css、reset.css、meyer.css

2)爱恨法则:

link>visited>hover>active

继承

子元素会继承父元素的某些css属性

通常,跟文字内容相关的属性都能继承(宽高、背景不可继承

属性值的计算过程

属性值的计算过程(页面渲染过程)

一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件:该元素所有css属性必须有值

一个元素,从所有属性都没有值到所有属性都有值,该计算过程叫属性值计算过程

1.确定声明值

参考样式表中没有冲突的声明,作为css属性值

2.层叠冲突

对样式表中没有冲突的声明使用层叠规则,作为css属性值

3.使用继承

对仍无值的属性,若可继承,则继承父元素值

4.使用默认值

对仍无值属性,使用默认值

inherit:手动强制继承,将父元素值取出应用到该元素

inltial:初始值,将该属性值设为默认值