CSS 的工作原理

我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。在本课中，我们将了解浏览器如何获取 CSS 和 HTML 并将其转换为网页。
先决条件：已安装基本软件，了解处理文件的基本知识以及 HTML 基础知识（学习 HTML 简介。目的：要了解浏览器如何解析 CSS 和 HTML 的基础知识， 以及当浏览器遇到它无法理解的CSS时会发生什么。

CSS实际上是如何工作的？

当浏览器显示文档时，它必须将文档的内容与其样式信息相结合。它分多个阶段处理文档，我们在下面列出了这些阶段。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。但这大致是发生的事情。

1. 浏览器加载 HTML（例如，从网络接收它）。
2. 它将 HTML 转换为 DOM（文档对象模型）。DOM 表示计算机内存中的文档。DOM 将在下一节中更详细地解释。
3. 然后，浏览器会获取 HTML 文档链接到的大部分资源，例如嵌入的图像、视频，甚至链接的 CSS！JavaScript 在此过程中稍后会进行处理，为了简单起见，我们不会在这里讨论它。
4. 浏览器解析获取的 CSS，并根据其选择器类型将不同的规则排序到不同的“桶”中，例如元素、类、ID 等。根据它找到的选择器，它确定哪些规则应该应用于 DOM 中的哪些节点，并根据需要为它们附加样式（这个中间步骤称为渲染树）。
5. 渲染树在应用规则后，将布局在它应该出现的结构中。
6. 页面的视觉显示显示在屏幕上（此阶段称为绘画）。

下图还提供了该过程的简单视图。

关于 DOM

DOM 具有树状结构。标记语言中的每个元素、属性和文本片段都成为树结构中的一个 DOM 节点。这些节点由它们与其他 DOM 节点的关系定义。有些元素是子节点的父节点，而子节点有同级元素。

理解 DOM 有助于你设计、调试和维护你的 CSS，因为 DOM 是你的 CSS 和文档内容相遇的地方。当您开始使用浏览器 DevTools 时，您将在选择项目时导航 DOM，以查看哪些规则适用。

真实的 DOM 表示

与其进行冗长、无聊的解释，不如让我们看一个例子，看看一个真实的HTML片段是如何被转换为DOM的。

采用以下 HTML 代码&