外链css没生效首要排查link标签是否被浏览器识别：检查rel="stylesheet"是否拼错、href路径是否正确、是否置于head内、network中是否发起请求且返回200及text/css类型。
外链 CSS 没生效，八成不是你写的规则错了，而是 <link> 标签压根没被浏览器当样式表处理——先盯死它有没有发请求、有没有加载成功，再谈选择器或优先级。
Network 面板里根本找不到你的 CSS 文件
这是最致命的信号：浏览器连文件都没去拿，后续所有样式逻辑都无效。
-
rel="stylesheet"拼错（比如rel="sytlesheet"、rel="style"、rel="css"）会导致标签被完全忽略，不发请求、不报错、也不出现在 Network 列表中 -
href路径用反斜杠：href="css\style.css"在所有现代浏览器中无效，必须用正斜杠/ - 相对路径基准错误：HTML 在
/admin/user.html，写href="css/style.css"会实际请求/admin/css/style.css，而非项目根目录下的/css/style.css - 本地双击打开 HTML（
file://协议）时，跨目录访问常被拦截，Network 状态码可能为0；务必用本地服务器（如 VS Code Live Server、npx serve）测试
Network 显示 200 但样式还是没效果
文件已加载，问题转向“规则是否起作用”或“是否被识别为 CSS”。
- 响应头
Content-Type不是text/css（比如返回text/plain或application/octet-stream），浏览器会拒绝解析；Nginx/Apache 需显式配置 MIME 类型 -
media属性不匹配：如media="(max-width: 768px)"在桌面宽屏下不会激活，临时改成media="all"快速验证 -
<link>放在底部或 JS 动态插入，部分浏览器延迟解析甚至跳过；必须确保在内且未加disabled属性 - 右键点击
href值 → “在新标签页中打开”，应直接显示纯 CSS 文本；若弹下载、跳 404 或显示 HTML 页面，说明路径或服务配置异常
Styles 面板里看不到你的规则，或整条被划掉
说明规则已加载，但没命中元素，或被更高优先级覆盖。
- 选择器大小写敏感：
.Header不匹配class="header"；HTML class 属性本身不区分大小写，但 CSS 选择器区分 - 空格陷阱：
.container .btn（后代） ≠.container.btn（同时含两个 class）；复制粘贴 class 名比手敲更可靠 - 被划掉的规则：点开看是谁覆盖了它——常见于框架 CSS（如 Bootstrap）、重置样式表，或内联样式（
style="..."） - Shadow DOM 或 scoped 组件（Vue/React）中，外部 CSS 默认不穿透；需用
:host .item或::slotted(.item)等语法
CSS 文件加载成功，但部分属性值不生效
这类问题往往静默发生，不报错也不提示，但效果就是不对。
- 属性值带多余引号：
background: "#8d45b7";是非法写法，应为background: #8d45b7;；引号只用于 URL 或字符串值（如content: "x";） -
display类型限制：对inline元素设width/height无效，需先改display: inline-block或block - 伪类时机问题：
a:visited在 Chrome 中仅允许修改极少数属性（如color），设display: none会被忽略 - 父容器
overflow: hidden+ 子元素transform: translateX(100px)可能导致内容移出可视区，“消失”而非失效
最容易被忽略的是 rel="stylesheet" 的拼写和 Content-Type 响应头——前者让整个加载链中断，后者让浏览器拿到文件却拒之门外。这两个点不验，后面所有调试都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
