link标签必须放在中，否则样式可能不生效；浏览器按顺序解析html，若在或表格后会导致fouc、旧版ie忽略，且href路径以html文件位置为基准，rel="stylesheet"缺失或拼错将静默失效。
link标签必须放在里，否则样式可能不生效
浏览器按顺序解析 HTML，<link> 如果写在 里，甚至表格后面，会导致样式延迟应用、FOUC（页面先无样式闪一下再重绘），旧版 IE（如 IE6–8）直接忽略该标签，CSS 根本不加载。
实操建议：
-
<link rel="stylesheet" href="style.css">必须出现在内，最好紧贴<meta charset>和<title></title>后面 - 不要用
document.body.appendChild()动态插入 —— 即使节点加进去了，也不能保证样式在首次绘制前就绪 - 检查 DOM 结构：打开开发者工具 Elements 面板，确认
<link>确实在下，而不是被意外包裹进或其他标签里
href路径写错，90%的404都源于此
控制台报 Failed to load resource: the server responded with a status of 404 ()，大概率是 href 指向了一个不存在的文件。关键不是“怎么写路径”，而是“路径以谁为基准”——它永远以当前 HTML 文件所在位置为起点，不是 CSS 文件位置，也不是服务器根目录。
实操建议：
- HTML 在
/pages/list.html，CSS 在/css/table.css→ 写href="../css/table.css" - 不确定时，打开 Network 面板，点那个 404 请求，看「Initiator」列对应哪个 HTML 文件，再看「Request URL」实际拼出来的是什么
- 开发阶段优先用根相对路径：
href="/css/table.css"（开头带/），避免因 HTML 文件移动导致路径失效 - 绝对路径必须用正斜杠：
href="css/style.css"✅，href="css\style.css"❌（Windows 反斜杠不被识别）
rel="stylesheet"漏写或拼错，样式静默失效
这个属性不是装饰，是浏览器识别资源类型的开关。漏掉、写成 rel="style" 或 rel="css"，结果就是：请求发出去了，文件也下载了，但浏览器压根不解析 CSS 规则——table { border-collapse: collapse; } 就像没写过一样。
实操建议：
- 每次写完
<link>，立刻检查是否同时包含rel="stylesheet"和href，二者缺一不可 - 别加多余属性干扰，比如
type="text/css"已过时，现代浏览器不需要；onload属性不跨浏览器兼容（Firefox 不支持），应改用addEventListener('load', ...) - 引号必须闭合：
href=style.css❌，href="style.css"✅（某些解析器会出错）
多个link加载顺序影响样式覆盖结果
CSS 加载顺序 = 样式优先级顺序。后加载的 CSS 中同名规则会覆盖前面的（前提是选择器权重相同）。很多人改了样式没反应，其实是被后面某个 <link> 覆盖掉了。
实操建议：
- 按依赖关系排列：基础重置（reset）→ 通用组件 → 页面专属样式 → 覆盖补丁（override）
- 避免在页面底部插入新
<link>来“临时覆盖”，这会让维护变得不可控 - 注意 CDN 引入的第三方样式（如
href="https://cdn.example.com/ui.css"）也可能覆盖本地规则，调试时先禁用它确认是否冲突
<link> 这一行本身有没有被浏览器当真——位置、rel、href，三者任何一个出问题，样式就彻底缺席。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
