rel="stylesheet"拼写错误是最隐蔽致命原因，浏览器只认该值（两个t、无y），错写为sytlesheet等会直接忽略link标签、不发请求；需通过源码搜索、vs code补全及network面板验证。
rel="stylesheet" 拼写错误是最隐蔽的致命原因
浏览器只认 rel="stylesheet"（两个 t，无 y），写成 sytlesheet、styleSheet、css 或漏掉引号，都会直接忽略该 <link> 标签——不发请求、不解析、不报错、DevTools Network 面板里完全看不到它。
验证方法：
- 右键页面 → “查看网页源代码”，搜索
<link>，肉眼核对 <code>rel值 - 在 VS Code 里输入
<link rel="">，看是否自动补全为 <code>stylesheet - 打开 DevTools → Network → 刷新 → 过滤
css，确认文件是否出现在列表中
CSS 文件返回了 200 却没生效，先查路径和作用域
200 状态只说明服务器返回了内容，不代表路径解析正确或样式能命中元素。
常见路径陷阱：
-
href="/css/style.css"是从根目录找，若 HTML 在子目录（如/blog/index.html），实际应写href="../css/style.css"或更稳妥的href="./css/style.css" - Vite/webpack 项目中，
@import的路径是相对于当前 CSS 文件，不是 HTML 文件 - Django/Flask 的
{% static %}模板标签，需确认生成的 URL 真实存在且响应体非空
作用域干扰：
- Vue 单文件组件加了
scoped，框架类（如.btn）不会被影响，但你在<style scoped></style>里写的.btn规则本身不会生效 - Shadow DOM 内部需用
::slotted(.item)或:host .item，普通.item无效
样式规则显示在 Styles 面板但没效果，大概率是选择器没匹配上
右键目标元素 → “检查”，在 Elements 面板逐字核对 class 名：大小写敏感（.Card ≠ .card），空格语义不同（.container .btn 是后代，.container.btn 是同时拥有两个类）。
其他易忽略点：
- JS 动态插入的节点（如
document.createElement('div').className = 'tip'），CSS 必须已加载，且选择器结构要与最终 DOM 一致 -
:hover、:focus等伪类需满足对应状态才在 Computed 面板可见 - Flex/Grid 容器未声明
display: flex或display: grid，子项属性再全也无效
本地有效、上线失效，重点盯 Content-Type 和缓存
生产环境常因 HTTP 头或构建配置导致样式静默失败：
- 服务器返回的
Content-Type是text/plain而非text/css，浏览器直接忽略解析（Nginx/Apache 需配置 MIME 类型） - Webpack/Vite 构建后 CSS 提取到单独文件，但未正确注入 HTML（如
MiniCssExtractPlugin配置遗漏） - 浏览器强缓存旧版 CSS，强制刷新（
Ctrl+Shift+R）或禁用缓存（Network 面板勾选Disable cache）可快速验证
真正难排查的，往往不是某一行代码写错，而是路径解析、作用域边界、HTTP 头这些“看不见的链路”断掉了。每次怀疑样式失效，先打开 Network 看请求是否存在，再进 Elements 看规则是否列出，最后比对 DOM 结构和选择器——顺序不能乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
