浏览器如何处理 CSS 样式并将其应用于 DOM 元素？

【问题标题】：How do browsers process and apply CSS styles to DOM elements?浏览器如何处理 CSS 样式并将其应用于 DOM 元素？
【发布时间】：2012-11-23 16:41:28
【问题描述】：

浏览器将 CSS 样式应用于 DOM 元素是否存在一致/通用的顺序？

比如box模型是：margin、border、padding和width。

浏览器处理与盒子模型顺序相同的 CSS 样式是否比列出的 CSS 样式更快：宽度、填充、边框和边距？

还有，所有 CSS 样式的处理顺序是否有标准/规则？

编辑：我在询问浏览器应用特定 CSS 样式的特定顺序。这是一个通用标准还是每个浏览器？例如，浏览器是否必须先应用 z-index 才能应用背景色？

【问题讨论】：

标签： html css dom

【解决方案1】：

CSS 样式将始终从上到下应用，从外部样式表开始（按照它们链接的顺序），然后是文档头部的样式，然后是内联样式。层次结构中后面的样式将覆盖较早出现的样式。

编辑：我需要修改我的答案。特异性也起作用。 CSS 选择器定义得越明确，它的优先级就越高。具有相同特异性的选择器按照我最初所说的方式工作。

编辑#2：实际上有一种计算给定选择器集的特异性量的好方法，可以在这里找到：[http://www.htmldog.com/guides/cssadvanced/specificity/]

（id 选择器）#foo 价值 100
（类选择器）.bar 值 10
（html 选择器）html/body/p/span/div/etc 值得 1

#foo span.bar= 111
html body p span = 4
等等

【讨论】：