现代浏览器对相同URL的CSS文件有强缓存机制，只要Cache-Control或ETag配置合理，重复引入不会触发多次HTTP请求；但URL需完全一致，且CSS规则重复声明会因源顺序导致后引入者覆盖先引入者。
重复引入同一 CSS 文件会触发多次 HTTP 请求吗
现代浏览器对相同 URL 的 CSS 文件有强缓存机制，只要 Cache-Control 或 ETag 配置合理，第二次及之后的 <link rel="stylesheet"> 引入不会发起新网络请求，而是复用已缓存的样式表。但前提是：URL 完全一致（含查询参数），且未被禁用缓存。
容易踩的坑：
- 路径看似相同，实则有细微差异，比如
/style.css和./style.css在不同上下文里解析为不同 URL - 加了时间戳或哈希但没做版本控制，如
style.css?v=1.0.0和style.css?v=1.0.1被视为两个资源 - 开发时用
file://协议打开 HTML，部分浏览器不执行缓存逻辑，真会重复加载
CSS 规则重复声明会导致样式覆盖不可控吗
不是“引入次数”决定覆盖结果，而是 CSS 选择器的特异性（specificity）、源顺序（source order）和!important 声明共同作用。重复引入同一份 CSS，等于把整套规则又插入一次文档流末尾——相当于把相同代码粘贴了两遍。
这意味着：
立即学习“前端免费学习笔记（深入）”；
- 后引入的同名规则会覆盖先引入的（源顺序优先）
- 如果两次引入的内容不同（例如构建产物未清理旧文件），可能出现 .btn { color: red } 和 .btn { color: blue } 并存，最终生效的是后者
- 使用
@import在 CSS 内部重复导入，还可能触发 FOUC（Flash of Unstyled Content）
/* 示例：两次引入 style.css，其中都含以下规则 */
.btn {
background: #007bff;
}
.btn:hover {
background: #0056b3;
}这种重复本身不会报错，但会让调试变得困难——你改了源文件，却发现页面没变，因为另一处旧版本还在生效。
Webpack/Vite 等构建工具下重复 import './index.css' 会怎样
在 JS 模块中多次 import 同一个 CSS 文件，打包工具通常会去重，只注入一次 <style></style> 标签。但有两个例外：
- Vite 开发模式下，HMR（热更新）可能临时保留旧样式标签，造成双份规则共存，刷新后恢复正常
- 如果 CSS 是通过
require()动态加载，或分散在多个React.lazy/defineAsyncComponent中，而工具未做模块级 dedupe，就真可能出现多份 - 某些插件（如
style-loader的injectType: 'singleton'未启用）会让每次import都插入新<style></style>
如何快速检测页面是否重复加载了某份 CSS
打开 Chrome DevTools → Application 选项卡 → 左侧 Frames → 展开当前页面 → Stylesheets，查看列表中是否有重复名称的条目；再切换到 Network 选项卡，筛选 css，观察同名文件是否出现多次，且状态码不是 304 或 200 (from memory cache)。
更准的方法是查 DOM：
document.querySelectorAll('link[rel="stylesheet"][href*="base.css"]').length
// 返回 2？说明重复引入了真正麻烦的不是多一次请求，而是多人协作时没人意识到某组件内部悄悄 import 了全局样式，结果上线后按钮颜色突然变了——问题藏得深，复现靠运气。
