最常见且易忽略的问题是link标签未加rel="stylesheet"，导致浏览器不解析CSS；其次为路径错误、缓存未更新、样式被高优先级规则覆盖。
link 标签没加 rel="stylesheet"
这是最常见也最容易忽略的问题：HTML 中用 引入 CSS 时，如果漏掉 rel="stylesheet"，浏览器根本不会把它当样式表处理，哪怕路径完全正确，样式也绝不会生效。
错误写法：
正确写法必须包含 rel 属性：
- 没有
rel，浏览器默认按rel="noopener"或其他非样式语义处理，直接跳过解析 CSS - 部分编辑器或 Lint 工具可能不报错，但 Chrome DevTools 的 Network 面板里能看到该文件的 MIME 类型是
text/html或未指定，而非text/css - 即使在本地双击 HTML 文件打开（
file://协议），这个缺失也会导致样式失效
href 路径错误或资源未加载成功
路径问题不是“找不到文件”那么简单——它会静默失败，控制台未必报错，但 Network 面板里能看到状态码为 404 或 0（尤其 file:// 下跨目录访问被浏览器拦截）。
- 相对路径以 HTML 文件所在位置为基准，不是 CSS 文件位置。比如
index.html在根目录，css/style.css在子目录，那么href="css/style.css"才对；若写成href="style.css"就会找根目录下的style.css - 路径含空格、中文或特殊字符（
如
[、#）必须 URL 编码，否则请求中断 - 使用 VS Code Live Server 或本地服务器时，路径行为和双击打开
file://不同，建议统一用本地服务调试
CSS 文件被缓存且内容已更新
浏览器缓存了旧版 CSS，你改了代码却看不到效果，常误判为“样式不生效”。尤其开发中频繁修改时，缓存机制会让 link 加载的仍是磁盘上的旧字节。
- 强制刷新（
Ctrl+Shift+R或Cmd+Shift+R）可绕过缓存重载 CSS - DevTools 的 Network 面板勾选
Disable cache，再刷新页面 - 临时在
href后加版本参数，例如href="style.css?v=1.0.1"，避免手动清缓存 - 注意：某些构建工具（如 Vite、Webpack）的 HMR 不会触发
link的重新解析，改完 CSS 后仍需手动刷新
样式被更高优先级规则覆盖（但你以为它没加载）
看到元素没变样，第一反应常是“CSS 没引入”，其实它加载了，只是被别的规则干掉了。这种问题容易误导排查方向。
- 打开 DevTools，选中目标元素，在 Styles 面板里看对应样式是否被划掉（
strikethrough），被划掉说明被更具体的规则覆盖 -
link引入的 CSS 默认权重和内联样式相同，但顺序靠后则覆盖靠前的同权重规则 - 检查是否有
!important、内联style属性、或 Shadow DOM 边界阻断了样式穿透 - 用
Computed面板确认最终生效的color、display等值来源，比只盯Styles更可靠
rel="stylesheet" 缺失 + 缓存叠加 + 控制台无报错这三者一起发生。动手前先打开 Network 面板，盯着那个 CSS 文件的状态码和 MIME 类型看两秒，比反复检查选择器有效得多。
