3

假设我的 CSS 看起来像这样：

#element {background-image: url("image1.png");}
#element {background-image: url("image2.png");}

浏览器会：

  • 请求 image1.png，然后请求 image2.png 并显示它？或者...
  • 先解析css，看到指定image2.png的选择器优先，只请求显示image2.png？
4

4 回答 4

3

它先解析 CSS，然后请求图像，因此不会下载 image1.png

于 2012-10-12T14:43:38.333 回答
1

通过使用 Chrome 和开发者工具进行一些快速测试：

  • 如果#element不存在，则不会下载任何图像，因为浏览器没有匹配的元素来应用样式
  • 如果#element存在，则应用通常的 CSS 级联和特异性规则，并且只会image2.png下载该规则，因为该规则出现在规则之后image1.png。

也就是说，其他浏览器的行为可能会有所不同。

于 2012-10-12T14:52:06.967 回答
0

如果您在 chrome 中实现一个运行它的网站，您可以看到浏览器首先解析 CSS，创建它需要的规则和请求，然后发出请求。

在 CSS 底部的 CSS 规则中，CSS 会覆盖任何从顶部开始的规则，因此浏览器知道只请求作为最终规则的图像。

于 2012-10-12T14:56:12.357 回答
-1

如您所知，当您第一次请求页面时，您的浏览器会向服务器发送请求。然后浏览器开始解析页面。

当它找到对外部资源的引用时，它将对该资源执行另一个请求。所以我认为它仍然会加载它。

于 2012-10-12T14:38:28.073 回答