属性值计算过程

约 872 字大约 3 分钟

2025-11-24

基本概念

每一个 HTML 元素的 CSS 属性都必须有值，浏览器才知道如何显示它；

在开发者工具的Computed栏下可以看到每个元素的所有 css 属性值。

HTML 元素的所有 CSS 属性从没有值到每个 CSS 属性都有值的过程称之为 CSS 属性值的计算过程。

CSS 属性值的计算过程.png

它所经历的过程大致分为四个步骤：

下面我们以这段代码来讲解四个步骤

🎉 专业术语

作者样式表: 开发者定义的样式 浏览器默认样式表: 浏览器自带的默认样式，又称用户代理样式表

找到【没有冲突】的样式，直接做为计算后的样式确定声明值.png font-size属性有多个选择器声明该属性，则其为【冲突】的样式

冲突单（或多）个选择器对同一个属性进行重复声明

预设值经过计算后会转为绝对值 例如：

font-weight: blod;
color: #000000;
background-color: #000000;

转为绝对值：

font-weight: 700;
color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 1);

我们以四位数字进行比较其特殊性（权重）

例如【font-size】

它们之间使用按位比较大小，请注意它们每一位之间绝对不会发生进位情况

最终选择: div h1.red

div h1.red {
  font-size: 3em;
  font-size: 30px;
}

在 VSCode 中，当鼠标悬浮在 CSS 选择器上时，会自动提示其特殊性（但会省略第一位 style）

源次序: 即源码中的书写位置，源码中靠后的覆盖靠前的

最终:

对仍然没有值的属性，若可以继承，则使用继承

文字相关可以继承

非文字相关不可以继承；如：宽高

div {
  text-algin: center;
}

则h1集成div的text-algin: center的属性值

对仍然没有值的属性，直接使用默认值

比如我们没有声明background-color属性，则直接使用默认值transparent

通常我们认为a标签应该继承父元素的字体颜色，input标签应该继承父元素的字体大小；但实际上由于浏览器默认样式中存在其属性的声明，所以不会发生继承这一步骤。

我们可以通过作者样式表对其进行重新声明，进而达到期望效果。

指定属性应从父元素继承它的值

a {
  color: inherit;
}

input {
  font-size: inherit;
}

清除所有浏览器默认样式

body,
body *:not(script) {
  all: unset;
}

button 设置所有属性为浏览器默认样式

button,
button:hover,
button:active {
  all: revert;
}