【CSS】样式的计算过程

标签的 CSS 样式

现在有这么一段 HTML 代码：

<div class="test"><h1>Hello World</h1>
</div>

目前我们没有给 h1 设置任何样式，可以看到 h1 自带了一些样式，eg：font-size、font-weight、margin。

这里我们需要注意的是：h1 上面会有所有的 CSS 属性。我们可以打开浏览器的开发者面板，选择 [元素] - [计算样式] - 勾选 [全部显示]，就能看到 h1 上应用的 CSS 属性。这里展示的属性值都是计算后的具体值，颜色值都是 rgb 的格式、长度值都以 px 为单位。

就是说，我们书写的任何一个 HTML 元素，实际上都应用了一整套 CSS 样式。

样式的计算过程

总的来讲，CSS 属性值的计算过程，分为如下 4 个步骤：

1. 确定声明值
2. 解决层叠冲突
3. 继承属性值
4. 使用默认值

确定声明值

我们编写如下 CSS（层叠样式表）代码：

h1 {color: red;
}

我们编写的层叠样式表称为 “作者样式表”，浏览器内置的层叠样式表称为 “用户代理样式表”。

现在就可以确定声明值了，“作者样式表” 设置了 color 属性，“用户代理样式表” 设置了 display、font-size 等属性。

解决层叠冲突

在确定声明值时，可能出现 “声明的样式发生冲突” 的情况，此时会进入解决层叠冲突的流程。

这一步可以分为下面这 3 个步骤：

1. 比较源的重要性
2. 比较样式的权重
3. 比较编写的位置

1. 比较源的重要性：“作者样式表” > “用户代理样式表”

h1 {font-weight: 400;color: red;
}

使用上述样式，可以看到页面上的 h1 最终应用了 font-weight: 400 这个属性值。

2. 比较样式的权重：

.test h1 {font-size: 50px;
}h1 {font-size: 20px;
}

上面的样式同属于 “作者样式表”，即源的重要性相同，此时就会比较样式的权重。样式的权重有 3 个等级：

1. ID 选择器：(1, 0, 0)
2. 类选择器、属性选择器、伪类选择器：(0, 1, 0)
3. 元素选择器、伪元素选择器：(0, 0, 1)

上例 .test h1 的权重为 (0, 1, 1)，而 h1 的权重为 (0, 0, 1)，因此最终会应用 font-size: 50px 这个属性值。

这里需要注意：权值不能跃迁。就是说，无论有多少个第 4 等的元素选择器，都不能超过一个第 3 等的类选择器。

也有说法是：最开始权重的计算是 256 进制的（(0, 0, 255) + (0, 0, 1) = (0, 1, 0)）。后随着计算机的发展 这个进制在不断增大。

不管怎样，我们就当作权值不能跃迁就好了。毕竟再怎么样写代码也不可能写出几百上千个选择器吧。

3. 比较编写的位置：行内样式 > 样式表的样式；位置靠后的样式 > 位置靠前的样式

h1 {font-size: 50px;
}h1 {font-size: 20px;
}

以上样式具有相同的源重要性和样式权重，此时位于下面的样式会覆盖掉上面的样式，最终会应用 font-size: 20px 这个属性值。

继承属性值

对于可继承属性，如果经过 “确定声明值”、“解决层叠冲突” 后，属性仍没有值，则会尝试继承最近的父元素身上的属性值。

div {color: red;
}

上例给 div 设置了 color 属性，由于 color 是可以继承的，因此 h1 从最近的父元素 div 身上继承了 color 属性。

大致上，与文本相关的属性都是可继承的，而与布局相关的属性都是不可继承的。

以下是一些可继承的 CSS 属性：

• 字体系列属性：font、font-family、font-weight、font-size、font-style 等。
• 文本系列属性：color、line-height、word-spacing、letter-spacing、text-transform、text-indent、text-align 等。
• 列表系列属性：list-style、list-style-type、list-style-position 等。
• 表格系列属性：border-collapse、border-spacing 等。
• 其他属性：visibility、cursor、direction 等。

以下是一些不可继承的 CSS 属性：

• 盒模型系列属性：margin、padding、border、width、height 等。
• 定位系列属性：position、top、right、bottom、left 等。
• 背景系列属性：background、background-color、background-image 等。
• 显示系列属性：display、overflow 等。
• 其他属性：vertical-align、z-index 等。

使用默认值

经过 “确定声明值”、“解决层叠冲突”、“继承属性值” 后，如果属性仍没有值，才会使用默认值。

DEMO

<div><a href="#">Hello World</a><h1>Hello World</h1>
</div>

div {color: red;
}

问：a 元素是什么颜色？ h1 元素又是什么颜色？

答：a 元素为蓝色，h1 元素为红色。

解释：因为 a 元素的 “用户代理样式表” 设置了 color 属性，因此会应用此声明值。而在 h1 元素中，无论是 “作者样式表” 还是 “用户代理样式表”，都没有对此属性进行声明，由于 color 属性是可继承的，因此 h1 元素会继承父元素 div 的 color 属性。

如果希望 a 元素可以继承 div 的 color，可以显式地设置 color: inherit。

除了 inherit 这个特殊值，还有 initial，可以通过 color: initial 显式地设置 color 属性值为默认值。