目录
层叠
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:初始值,将该属性值设为默认值