CSS中未匹配DOM元素的选择器内的url()资源是否会被加载？

你给出的示例中，没有匹配到DOM元素的.not-box选择器对应的背景图不会被Chrome、Firefox、Safari、Edge等主流浏览器加载，不会占用当前页面的加载时长。

你可以自行通过浏览器开发者工具的「网络」面板验证该逻辑：过滤图片类请求后刷新页面，只会出现div.box对应的图片请求，.not-box的图片不会出现在请求列表中。

浏览器加载url()关联的资源时，普遍遵循以下逻辑：

• 只有当CSS选择器匹配到当前页面的真实DOM元素，且对应样式规则处于生效状态时，才会发起资源请求
• 除background-image外，border-image、list-style-image、content: url()等所有用到url()的CSS属性，都符合这个规则
• 如果后续通过JS动态给元素添加了.not-box类名，浏览器会在类名生效、样式命中元素时，才发起对应图片的加载请求

只有以下特殊场景，未命中选择器的资源才会被提前加载：

• 你手动通过link rel="preload"指令主动声明预加载对应资源
• 部分老旧浏览器对@font-face声明的字体资源存在全量加载的逻辑，但现代浏览器已经优化为仅加载页面实际用到的字体规则

内容的提问来源于stack exchange，提问作者Student Edge