css是怎么工作的?
- 浏览器载入html文件
- 将html转换为一个DOM,DOM是文件在计算机内存中的表现形式.
- 拉取与html相关的大部分资源,比如图片/视频/css样式,js则会稍后进行处理,
- 拉取css后会进行解析,根据选择器的不同类型,把它们分到不同的桶中,基于桶找到不同的选择器,将不同的规则(基于选择器规则,比如id/lei/元素选择器等)应用到对应的DOM节点,并添加节点依赖的样式(也叫渲染树).
- 规则应用与渲染树后,渲染树会依照应该出现的结构进行布局.
- 网页展示在屏幕上(也叫着色)
关于DOM
DOM有一个树形结构,元素/属性/文字都对应着一个节点(node).
<p>Let's use:<span>Cascading</span><span>Style</span><span>Sheets</span>
</p>
在这个 DOM 中，
<p>元素对应了父节点，它的子节点是一个 text 节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的 Text 节点的父节点。
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN└─ "Sheets"
文档地址:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works
