CSS 属性的计算过程

见解分享

2024-01-02 14:32:19

CSS 的广泛适用性源于其简洁易学的语法，然而，浅显的入门门槛也导致许多开发者忽视了 CSS 基础概念的深入理解。随意的复制粘贴往往能解决一时之需，却在长远中造成了大量冗余的样式定义和滥用 !important 的不良局面。

深入了解 CSS 属性的计算过程，无疑有助于我们从根本上掌握 CSS 的运作方式，从而编写出更优雅、可维护、可预测的样式代码。

1. 指定性计算

当多个样式规则同时应用于同一个元素时，浏览器会依据指定性来决定最终生效的样式。指定性由以下几个因素决定：

内联样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配符选择器
多个同级选择器的顺序：后出现的样式优先级更高
继承的样式不参与指定性计算

2. 继承和初始值

某些 CSS 属性具有继承性，这意味着元素可以从其父元素继承属性值。如果没有明确指定，属性将使用其初始值，初始值通常由浏览器或 CSS 规范定义。

3. 计算规则

一旦计算出指定性，浏览器将根据以下规则计算属性值：

相同的属性值覆盖不同的属性值。
!important 声明强制覆盖所有其他规则。
百分比值相对于父元素的已计算值。
尺寸单位相对于父元素的字体大小或元素本身的宽度和高度。
颜色值按照浏览器解析和处理颜色的方式进行计算。

4. 优先级级联

CSS 属性的计算过程遵循一个级联模型：

浏览器首先从根元素开始，为每个元素计算样式。
然后，它会遍历每个元素及其子元素，为每个元素重新计算样式，同时考虑到继承和指定性。
这个过程一直持续到所有元素的样式都计算完毕。

5. 例子

让我们举个例子来理解 CSS 属性计算过程：

<style>
    body {
        font-size: 16px;
    }
    .heading {
        font-size: 24px;
    }
    #main-heading {
        font-size: 32px;
    }
</style>

<body>
    <div class="heading">Main Heading</div>
</body>

对于元素 <div class="heading">Main Heading</div>，其最终计算出的 font-size 值为 32px，计算过程如下：

指定性计算： #main-heading 的指定性最高，因此其样式优先。
继承和初始值： font-size 属性具有继承性，但 #main-heading 显式指定了其值。
计算规则： #main-heading 指定的 font-size 值 (32px) 覆盖了 body 和 .heading 指定的值。
优先级级联： #main-heading 的样式应用于其自身，覆盖了其父元素 (.heading) 和根元素 (body) 的样式。