浏览器如何处理和应用CSS样式到DOM元素?

时间:2012-11-23 16:41:28

标签: html css dom

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

例如,框模型是:边距,边框,填充和宽度。

浏览器是否处理以与框模型相同的顺序列出的CSS样式比列出的CSS样式更快:宽度,填充,边框和边距?

并且,是否有处理所有CSS样式的顺序的标准/规则?

编辑: 我问的是浏览器应用特定CSS样式的具体顺序。这是一个通用标准还是每个浏览器?例如,浏览器在应用背景颜色之前是否必须应用z-index?

1 个答案:

答案 0 :(得分:4)

CSS样式将始终从上到下应用,从外部样式表开始(按照它们链接的顺序),然​​后是文档头部的样式,然后是内联样式。层次结构中稍后的样式将覆盖先前出现的样式。

编辑:我需要修改我的答案。特异性也起着重要作用。 CSS选择器的定义越明确,它的优先级就越高。具有相同特异性的选择器按照我最初的说法工作。

[http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/]

编辑#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