Advanced CSS and Sass_学习记录_03_How CSS Works Behind the Scenes Part 1：层叠与特异性

How CSS Works Behind the Scenes Part 1：层叠与特异性

在前端开发中，CSS（层叠样式表）扮演着至关重要的角色，它负责控制网页的视觉呈现。然而，很多开发者对CSS的工作原理了解并不深入。本文将详细探讨CSS在幕后是如何工作的，重点关注层叠（Cascade）和特异性（Specificity），帮助你更好地理解和应用CSS。

---

一、CSS的处理流程

在深入探讨层叠和特异性之前，了解浏览器是如何处理CSS的有助于我们更好地理解这些概念。以下是浏览器解析HTML和CSS的基本流程：

1. 加载HTML文件：浏览器从服务器请求并加载HTML文档。
2. 解析HTML文件，构建DOM树：浏览器解析HTML标记，创建一个包含所有节点的DOM（文档对象模型）树。
3. 解析HTML时，遇到CSS文件，加载CSS文件：当解析到<link>或<style>标签时，浏览器会请求并加载CSS文件。
4. 解析CSS文件：
   • 解决冲突（级联）：处理冲突的CSS规则，确定哪些样式应用于元素。
   • 处理最终的CSS值（继承、变量、计算值）：处理样式的继承、CSS变量以及计算最终的样式值。
5. 构建CSSOM树：生成CSS对象模型（CSSOM），表示样式信息的结构。
6. 构建渲染树：将DOM树和CSSOM树结合，创建渲染树，表示要显示的节点和样式。
7. 布局和绘制渲染树：浏览器计算每个节点的位置和大小，然后绘制到屏幕上（这一步涉及视觉格式化模型）。

---

二、什么是层叠（Cascade）？

**层叠（Cascade）**是指当一个元素同时受到多个CSS规则的影响时，浏览器需要决定哪些样式最终应用到该元素上。层叠过程包括以下步骤：

1. 收集所有匹配的规则：浏览器收集所有与元素匹配的CSS规则。
2. 按照优先级排序：根据规则的重要性、特异性和来源顺序，排序这些规则。
3. 应用样式：按照排序结果，应用最高优先级的样式。

层叠的优先级顺序

当多个规则冲突时，浏览器按照以下顺序决定哪个样式具有更高的优先级：

1. 重要性（Importance）
2. 特异性（Specificity）
3. 来源顺序（Source Order）

---

三、重要性（Importance）

CSS的重要性主要由!important声明决定，它可以提升某个样式的优先级。以下是不同来源和重要性的优先级顺序（从高到低）：

1. 用户样式表中的!important规则：用户在浏览器或辅助工具中设置的带有!important的规则。
2. 作者样式表中的!important规则：开发者在CSS中编写的带有!important的规则。
3. 作者样式表中的正常规则：开发者在CSS中编写的普通规则。
4. 用户样式表中的正常规则：用户在浏览器或辅助工具中设置的普通规则。
5. 浏览器默认样式：浏览器自带的样式（User Agent Stylesheet）。

注意：尽量避免使用!important，除非在万不得已的情况下。过多使用!important会导致样式难以维护和调试。

---

四、特异性（Specificity）

特异性是指选择器的具体程度，越具体的选择器优先级越高。特异性由选择器中的不同部分决定，其计算规则如下：

特异性值的计算

特异性可以表示为四个等级的数值：（a, b, c, d），其中：

• a：如果存在内联样式，则为1，否则为0。
• b：ID选择器的数量。
• c：类、伪类、属性选择器的数量。
• d：元素、伪元素选择器的数量。

特异性比较时，先比较a，若相同则比较b，以此类推。

不同选择器的特异性值

1. 内联样式：a=1，例如<div style="color: red;"></div>。
2. ID选择器：b的值，每个ID选择器加1，例如#header。
3. 类、伪类、属性选择器：c的值，每个这样的选择器加1，例如.active、:hover、[type="text"]。
4. 元素、伪元素选择器：d的值，每个这样的选择器加1，例如div、h1、::after。

示例

• 内联样式的特异性：(1, 0, 0, 0)
• #nav 的特异性：(0, 1, 0, 0)
• .menu-item 的特异性：(0, 0, 1, 0)
• div 的特异性：(0, 0, 0, 1)
• #nav .menu-item:hover 的特异性：(0, 1, 1, 0)

---

五、来源顺序（Source Order）

如果重要性和特异性都无法区分优先级，那么最后应用的规则将会覆盖之前的规则。这意味着在CSS中，位于后面的规则会覆盖前面的规则。

---

六、总结

• !important 声明的CSS规则具有最高优先级，但应谨慎使用，避免代码难以维护。
• 内联样式的优先级高于外部或内部样式表中的样式。
• ID选择器的特异性高于类选择器，类选择器的特异性高于元素选择器。
• 通配选择器（*）的特异性为0，不会增加特异性值。
• 应尽量依靠特异性来控制样式的应用，而不是依赖来源顺序，这样代码更易维护。
• 当使用第三方样式表时，应将自定义的样式表放在后面，以确保自定义样式可以覆盖第三方样式。

---

七、实战示例

示例1

#nav div.pull-right a.button {
    background-color: orangered;
}

上述选择器的特异性为：(0, 1, 1, 2)

示例2

为了确保伪类选择器的样式不被其他规则覆盖，我们需要提高其特异性：

#nav div.pull-right a.button:hover {
    background-color: green;
}

此选择器的特异性为：(0, 1, 1, 3)

如果我们使用一个特异性较低的选择器：

#nav a.button:hover {
    background-color: yellow;
}

特异性为：(0, 1, 1, 2)

由于特异性较低，可能会被特异性更高的规则覆盖，导致:hover时样式无法生效。因此，为了确保伪类选择器的样式应用，需要确保其特异性高于其他规则。

---