后加载的css规则覆盖前面同权重规则是css层叠机制的正常表现；需确保rel="stylesheet"正确、路径可访问、返回text/css类型三者同时成立。
后加载的CSS规则会覆盖前面同权重的选择器
这不是bug，是CSS层叠（cascading）机制的正常表现。浏览器按 <link> 在 中出现的顺序依次解析样式表，后面文件里相同选择器、相同特异性（specificity）的声明，会直接替换前面的值。
常见误判场景：
- 改了
theme.css里的button { background: blue; }，但页面按钮还是灰色 → 检查是否真在最后加载，或被更早的components.css里带!important的规则锁死 - 用开发者工具看“Computed”面板时，属性值旁的文件名链接点进去，发现实际生效的是
base.css而非你刚改的文件 → 顺序错了，或路径写错导致该<link>根本没加载
rel="stylesheet" 缺失或写错会导致整个文件被忽略
浏览器只认 rel="stylesheet" 才会把 <link> 当作样式资源处理。漏写、拼错（比如写成 rel="style" 或 rel="css"），或者用了已废弃的 rel="import"，都会让标签静默失效——控制台无报错，但样式完全不应用。
实操建议：
- 逐个检查每个
<link>是否都带rel="stylesheet"，一个都不能少 - 不要依赖 IDE 自动补全，有些模板会默认塞
type="text/css"却漏掉rel—— 这个属性才是开关 - 在 Network 面板里确认每个 CSS 请求返回状态码是 200 且
Content-Type是text/css，不是text/plain或 404
路径错误会让link加载失败，但页面不提示
相对路径是以 HTML 文件所在位置为基准计算的，不是以当前 CSS 文件、也不是以服务器根目录为准。比如 blog/article.html 里写 href="css/main.css"，浏览器实际请求的是 /blog/css/main.css，而非你项目根下的 /css/main.css。
容易踩的坑：
- 嵌套层级深时，
../css/main.css和css/main.css混用，本地开发可能碰巧对，上线就 404 - 直接双击打开 HTML（
file://协议），多数现代浏览器会拒绝加载外部 CSS，连 Network 都看不到请求 —— 必须用本地服务器（如python3 -m http.server） - 构建工具（Vite/Webpack）注入的
<link>可能和你手写的重复，导致某份样式被加载两次或路径错乱
别用 @import 替代 link，尤其在 HTML 中
@import 是 CSS 规则，不是 HTML 标签。你在 里写 <style>@import "a.css";</style>，不仅违反规范，还会触发串行加载、阻塞渲染、无法并行下载，而且 IE6–8 兼容性极差。
真正安全的场景只有两个：
- 在某个 CSS 文件内部（如
main.css）开头写@import url("variables.css"); - 构建阶段由工具（如 Vite）自动将
import './theme.css';转为<link>标签并保证顺序
HTML 中硬写 @import，等于主动放弃加载性能和调试确定性。
最常被忽略的一点：顺序对了 ≠ 样式一定生效。三个独立变量必须同时成立——rel="stylesheet" 正确、路径可访问、文件返回 text/css 类型。少一个，你就得在 “为什么我改了却没变” 上多花十分钟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
