HOW CSS works ?

这篇文章解释了浏览器如何将HTML转换为文档对象模型（DOM）、CSS是如何应用到DOM的各个部分。

1. 理解

document：就是使用标记语言（如HTML、XML）架构的文本文件，向用户呈现一个document意味着把这个document转换成用户可以理解的格式。

2.CSS如何工作

当浏览器展示一个document时，它必须合并文档内容和样式信息。有这样的两个阶段：

1. 浏览器把HTML和CSS转换成DOM（文档对象模型），DOM表示计算机内存中的文档，它合并了文档的内容和样式。

2. 浏览器呈现DOM的内容

   

3.关于DOM

DOM有一个树状结构，HTML中的每一个元素、属性、文本都成为树状结构中的节点，这些节点通过他们和其他DOM节点的关系被定义。一些节点是父节点，一些节点是子节点。
因为DOM是CSS和文档内容融汇的地方，所以理解DOM帮你设计，调试，维护你的CSS。

使用代码加强理解：

<p>
让我们使用:
<span>样式表</span>
<span>好吗？</span>
</p>

如上所示，在DOM中，p元素对应的节点（node）是父节点，其子节点是文本节点和span元素对应的节点，此外，span元素对应的节点也是父节点，其子节点是文本节点（对，文本内容也是一种节点）。
浏览器就是通过这样的方式来解释HTML文档的——–它渲染了上面的DOM树，然后这样输出：

让我们使用样式表好吗？

如果我们使用CSS对其进行渲染，CSS代码如下：

span {
  border: 1px solid black;
  background-color: lime;
}

浏览器先解析HTML，并以此创建一个DOM树，然后再解析CSS，将CSS中的规则应用于DOM中的节点。

原文地址：
https://developer.mozilla.org/enUS/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works