Question

我正在努力了解浏览器处理CSS的确切方式和顺序。我已经知道CSS是从右到左阅读的，但更具体地说，我想知道是否：

浏览器遍历DOM中的每个元素，并且对于每个元素，扫描CSS规则以查找哪些样式匹配？...或者是否：
浏览器浏览每个CSS规则，并为每个选择器扫描DOM以找到与该选择器匹配的DOM元素？

（或者这可能在浏览器之间有所不同？）

Answer 1

据我所知，这不是由CSS标准定义的，CSS标准仅指定结果，而不是指定结果。由于两个“算法”都会给你相同的视觉输出，它们都应该是有效的实现，假设它们还考虑到网页的动态特性（也就是说，元素可以通过Javascript几乎随时移动，添加，修改或删除这可能会改变它们匹配的CSS规则，甚至可能改变其他元素匹配）。

这应该依赖于实现。不同的浏览器不必以相同的方式完成所有操作。但请放心，浏览器领域的竞争非常激烈，您不必担心设置CSS规则会对性能产生影响。

Answer 2

有关CSS处理层次结构的一点需要注意的是链接到CSS文件。

使用link调用的样式表将更快加载：

<link rel='stylesheet' type='text/css' href='foo.css'>

而不是使用@import调用的样式表：

<style>
@import url('foo.css');
</style>

这是一个非常简单的例子，但你明白了。您可以在此处阅读更多内容：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

如何处理CSS？

2 个答案: