浏览器是否请求在CSS中覆盖的图像？

Question

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

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

浏览器：

• 请求image1.png，然后请求image2.png并显示它？或...
• 首先解析CSS，看看指定image2.png的选择器是否优先，只请求并显示image2.png？

Answer 1

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

Answer 2

使用Chrome和Developer Tools进行的一些快速测试：

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

也就是说，其他浏览器可能表现不同。

Answer 3

如果您在Chrome中实现运行此网站的网站，您可以看到浏览器首先解析CSS，创建规则＆amp;请求它然后发出请求。

在CSS底部的CSS规则覆盖顶部的任何内容，因此浏览器知道只请求最终规则的图像。

Answer 4

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

当它找到对外部资源的引用时，它将再次请求该资源。所以我认为它仍会加载它。