HTML代码与内部CSS的执行流程是怎样的？

先看你提供的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta>.......
    <title>Document</title>
    <style>
      .container {background-color: tomato; padding: 20px;}
      .text {color: green;}
    </style>

</head>
<body>
    <div class="container">
      <p class="text">Hello World!!</p>
    </div>
</body>
</html>

你的理解核心逻辑是正确的，但浏览器的实际处理是边解析边执行的，并非完全割裂成三个独立阶段，下面拆解具体流程：

• 浏览器从上到下加载HTML文件，首先解析<!DOCTYPE html>声明，确认文档为HTML5类型，建立对应的解析规则。
• 解析<html>标签，启动**DOM树（文档对象模型）**的构建。
• 进入<head>标签，依次解析<meta>、<title>元素，将它们添加到DOM树中。
• 遇到<style>标签时，浏览器会暂停当前HTML的解析，优先处理内部CSS：
  • 把所有CSS规则（.container、.text的样式）存入CSSOM（CSS对象模型）；
  • 同时计算每个选择器的特异性权重，提前处理规则优先级（比如冲突规则的生效逻辑）。
• CSS解析完成后，浏览器恢复HTML解析，处理完<head>剩余内容后进入<body>标签。
• 解析<div class="container">：
  • 解析完成后将该元素加入DOM树；
  • 立刻在CSSOM中匹配.container选择器，结合特异性、继承等规则计算出最终样式并应用。
• 接着解析<p class="text">，重复上述步骤：加入DOM树，匹配.text规则，应用计算后的样式。
• 当整个HTML文档解析完成、DOM树构建完毕，且所有元素的样式计算完成后，浏览器会执行布局（重排）确定元素的位置和大小，随后进行绘制（重绘），将带样式的内容渲染到页面上。

简单总结：你说的“保存CSS规则→创建HTML元素→匹配应用样式（处理特异性）”是简化后的核心逻辑，实际过程中除了<style>会暂停HTML解析优先处理CSS外，浏览器是解析到一个元素就创建一个、同时应用已解析好的CSS规则，但核心逻辑和你的理解一致。

内容的提问来源于stack exchange，提问作者Cristian San