Web 浏览器的工作原理 - 解析 CSS（第 4 部分，附插图）⏳🌐

在 HTML 被解析之后，就该parse the CSS（在外部 CSS 文件和样式元素中找到）并构建CSSOM tree（CSS 对象模型）。

4. CSS解析

当浏览器遇到 CSS 样式表（无论是外部的还是嵌入的）时，它都需要将文本解析为可用于设置布局样式的内容。浏览器将 CSS 转换为的数据结构称为 CSSOM。DOM 和 CSSOM 遵循类似的概念，它们都是树，但它们是different data structures。就像从 HTML 构建 DOM 一样，从 CSS 构建 CSSOM 被视为一个阻塞渲染的过程。

标记化和构建 CSSOM

与 HTML 解析类似，CSS 解析也从标记化开始。CSS 解析器获取字节并将其转换为字符，然后转换为标记、节点，最后链接到 CSSOM。浏览器会执行一项称为 的操作，selector machting这意味着每组样式都会与页面上的所有节点（元素）进行匹配。

浏览器首先会根据节点适用的最通用规则（例如：如果某个节点是 body 元素的子节点，则所有 body 元素的样式都会被该节点继承），然后通过应用更具体的规则，递归地细化计算出的样式。这就是我们说样式规则是……的原因cascading。

假设我们有下面的 HTML 和 CSS：

body {
  font-size: 16px;
  color: white;
} 

h1 {
  font-size: 32px;
}

section {
  color: tomato;
}

section .mainTitle {
  margin-left: 5px
}

div {
  font-size: 20px;
}

div p {
  font-size:  8px;
  color: yellow;
}

此代码的 CSSOM 看起来像这样：

请注意，在上面的架构中，嵌套元素同时具有inherited styles（来自父级 - 例如：h1从继承其颜色body，section从继承其字体大小body）和their own styles（可以覆盖从父级继承的规则，也可以不覆盖 - 例如：p覆盖从继承的颜色和字体大小，div并且mainTitle不会从父节点获取其左边距）。

由于我们的 CSS 可以有多个来源，并且它们可以包含适用于同一节点的规则，因此浏览器必须决定最终应用哪个规则。这时，规则specificity就派上用场了。如果您想了解更多信息，可以访问此页面。

想象一下，你在机场寻找你的朋友约翰。如果你想通过喊他的名字来找到他，你可以喊“约翰”。很有可能机场里同时有不止一个约翰，所以他们可能都会回应。更好的方法是用他的全名来称呼你朋友，这样当你喊“John Doe”时，你就更有可能找到他，因为“John Doe”比“John”更具体。

同样，假设我们有这个元素：

<p>
  <a href="https://dev.to/">This is just a link!</a>
</p>

以及这些 CSS 样式：

a {
   color: red;
}

p  a {
   color: blue;
}

你认为浏览器会应用哪条规则？答案是第二条规则，因为all anchor tags inside a paragraph组合选择器比单一选择器具有更高的特异性all anchor tags。如果你想尝试不同的特异性，可以使用这个特异性计算器。

重要提示
：CSS 规则是从右到左读取的，也就是说，如果我们有类似这样的代码：section p { color: blue; }，浏览器会首先查找p页面上的所有标签，然后检查这些p标签中是否有任何section标签作为父标签。如果存在，浏览器就会应用该 CSS 规则。

参考资料：

• 截至 2016 年的 CSS 简史
• MDN Web 文档