同一页面上引用了两个CSS文件：generic.css文件和custom.css文件。通用文件中包含默认样式，这些样式由custom.css文件覆盖相同的元素。这允许站点的用户定制或“设计”他们的页面，而无需重新创建整个generic.css文件。只会覆盖几种样式。
我的问题如下：如果generic.css文件具有带背景图像的元素的样式，并且在custom.css中使用不同的背景图像覆盖相同的样式，则是第一个由浏览器吗？
另外，我想知道这是不好的做法 - 使用另一个自定义CSS文件自定义或“换肤”通用CSS文件以覆盖一些样式，包括指定不同的背景图像。
答案 0 :(得分：1)
虽然不完全确定，this site对此进行了一些测试。该网站与您的问题相关的重要声明是：
CSS图像的启动次数不是按照它们出现的顺序 CSS，但按照HTML中调用的顺序排列。我不确定 下载开始的确切时刻，但我的猜测是 它恰好在CSS规则匹配之后发生 属性值分配给DOM元素。
这至少暂时证实了我在几年前在脑海里读到的想法，也就是那些没有显示过的背景图像（就像在通用图像中被覆盖的那样）永远不会下载.css图片。
对此的进一步确认将是典型的图像预加载器脚本，它曾经在精灵图像之前如此常见（并且在某些用途中仍然存在）。它被设计为下载将在css中:hover上使用的图像，因为没有它，图像将不会加载，直到第一个悬停开始，这导致了难看的延迟。所以，这也证明了这样一个事实：除非实际显示（或预加载），否则背景图像本身永远不会被加载。
我不认为“皮肤化”通常存在任何问题，除非你基本上用custom.css覆盖了大部分或全部的generic.css，否则可以说，为什么要加载泛型。但正如你所说，通常只会覆盖几种样式。
答案 1 :(得分：1)
我认为我回答了 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“）中心顶部;”读取但未被浏览器调用/执行。
据我所知，文件 css1.css 的值会被 css2.css 的值叠加。如果有 css3.css 文件怎么办？然后文件css3.css也将堆叠在css1.css和css2.css的组合上。
希望它有所帮助。