同一页面上引用了两个 CSS 文件：一个 generic.css 文件和一个 custom.css 文件。通用文件中有默认样式，这些默认样式被相同元素的 custom.css 文件覆盖。这允许站点的用户自定义或“皮肤”他们的页面，而无需重新创建整个 generic.css 文件。只有少数样式会被覆盖。
我的问题如下：如果 generic.css 文件具有带有背景图像的元素的样式，并且在 custom.css 中使用不同的背景图像覆盖了相同的样式，那么浏览器是否下载了第一个图像？
另外，我想知道这是否是不好的做法 - 使用另一个自定义 CSS 文件自定义或“蒙皮”通用 CSS 文件以覆盖一些样式，包括指定不同的背景图像。
虽然不完全确定，但该站点对此进行了一些测试。该网站与您的问题相关的重要声明是：
CSS 图像不是按照它们在 CSS 中出现的顺序而是按照它们在 HTML 中被调用的顺序启动的。我不确定下载开始的确切时间，但我的猜测是它发生在 CSS 规则匹配之后，当属性值分配给 DOM 元素时。
这至少暂时证实了几年前我在脑海中读到的内容，即从未显示过的背景图像（如 generic.css 图像被 custom.css 图像覆盖） ) 从未下载过。
进一步证实这一点的是典型的图像预加载器脚本，该脚本在精灵图像之前非常普遍（并且在某些用途中仍然存在）。它旨在下载将:hover在 css 中使用的图像，因为没有它，图像在第一次悬停之前不会加载，这会导致难看的延迟。因此，这也证明了除非实际显示（或预加载），否则背景图像本身永远不会加载。
我认为“蒙皮”通常不会有任何问题，除非您本质上是用 custom.css 覆盖了大部分或全部 generic.css，然后有人可能会争论，为什么要加载泛型。但正如你所说，通常只有几个样式被覆盖。
我想我的回答是NO和NO BAD PRACTICE。因为当css文件被浏览器可读/可执行时，浏览器会进行比较，找到css文件之间的相同值或差异，然后将它们组合起来。
简单的例子：
css1.css文件中有一行：
.test {display: block; width: 100%; height: 600px; background: #991100 url("image1.jpg") center top; border: 1px solid red;}
然后css2.css还有一行：
.test {background: #991100 url("image2.jpg") no-repeat center center;}
将由浏览器执行和运行的组合结果是：
.test {display: block; width: 100%; height: 600px; background: url("image2.jpg") no-repeat center center # 991100; border: 1px solid red}
其中“背景：#991100 url("image1.jpg") center top;” 读取但未被浏览器调用/执行。
据我所知，文件css1.css的值由css2.css的值叠加。如果有css3.css文件怎么办？那么文件 css3.css 也会叠加在 css1.css 和 css2.css 的组合上。
希望能帮助到你。