层叠样式计算

43 阅读1分钟

CSS属性值计算过程:每个属性从无值到有值的过程

graph TD
1.无属性值 --> 2.确定声明值 --> 3.层叠冲突比对 --> 4.使用继承 --> 5.使用默认值 --> 6.元素每个属性都有值
1. 无属性值

image.png

2.确定声明值 :样式表中没有冲突的声明,作为CSS属性值

微信图片_20250521103840.png

QQ20250521-104641.png

3. 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值
  1. 比较重要性: 开发者样式表覆盖浏览器默认样式表 例子:

QQ20250521-135930.png 2. 比较特殊性:比较权重

  1. 比较源次序:代码靠后覆盖代码靠前

image.png

4.使用继承:对仍没有值的属性,若可以继承,则继承父元素的值

一般情况下与文字相关的可以继承

image.png

5.使用默认值:对仍然没有值的属性,使用默认值
6.完成计算