2

我试图准确了解浏览器处理 CSS 的方式和顺序。我已经知道 CSS 是从右到左读取的，但更具体地说，我想知道：

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

（或者这甚至可能因浏览器而异？）

4

2 回答 2

4

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

这应该取决于实现。不同的浏览器不必都以相同的方式进行。不过请放心，浏览器领域的竞争非常激烈，您不必担心设置 CSS 规则对性能的影响。

于 2013-01-11T17:56:47.697 回答
0

关于 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/

于 2013-01-11T20:11:28.967 回答