浏览器如何将CSS类与ID样式关联到HTML元素及CSSOM相关疑问

一、CSSOM的本质与图片表示的准确性 #

CSSOM（CSS对象模型）本质是存储所有样式规则的树状结构，核心是记录样式选择器与对应样式声明，并不直接包含HTML元素的结构信息。
你提供的这张CSSOM可视化图：

它的表示属于简化的教学可视化——把样式规则和目标元素做了关联展示，方便理解样式的作用对象，但这并非浏览器内部CSSOM的真实结构。真实的CSSOM仅存储样式规则（包括选择器、属性、值），不会存储HTML节点信息。

二、CSSOM是否包含类与ID？ #

答案是肯定的。CSSOM会完整存储所有CSS规则中的选择器信息，包括：

• 类选择器（如.container）
• ID选择器（如#header）
• 标签选择器（如div）
• 复合/组合选择器（如div.container > p）

浏览器解析CSS时，会将每个选择器拆解分析，构建为CSSOM节点，每个节点对应一组样式规则，同时会记录选择器的优先级（specificity），为后续元素匹配做准备。

三、CSSOM与DOM如何关联构建渲染树？ #

渲染树的构建，本质是CSSOM与DOM的匹配关联过程：

1. 从DOM树的根节点开始，遍历每个可见元素（隐藏元素会被直接跳过）
2. 针对每个DOM元素，在CSSOM中查找所有能匹配它的样式规则（依据标签、类、ID、属性等选择器）
3. 合并所有匹配到的样式规则（处理优先级、继承、层叠逻辑），得到该元素的最终计算样式
4. 将带有最终样式的DOM节点加入渲染树

这个过程中，CSSOM的选择器（包括类、ID）是匹配DOM元素的关键，浏览器会借助CSSOM的结构快速定位匹配规则，而非CSSOM本身存储DOM元素的关联信息。

内容的提问来源于stack exchange，提问作者Pacific East