rel="stylesheet"拼写错误是最隐蔽高频问题，浏览器严格匹配该值，错写为sytlesheet等会导致标签被忽略、不发请求；需用devtools elements和network面板验证拼写与200状态，并检查路径、content-type、选择器匹配及作用域隔离。
rel="stylesheet" 拼写错误导致整个CSS文件被忽略
浏览器对 rel 属性值严格匹配，写成 rel="sytlesheet"（多 y 少 t）、rel="styleSheet" 或 rel="css" 都会被直接跳过——不发请求、不报错、不解析任何规则，页面就是纯 HTML 流式结构。
打开开发者工具 → Elements 面板，检查 中的 <link> 标签，确认 rel 值是否为 stylesheet；再切到 Network 面板过滤 css，刷新页面：若目标文件完全不出现，基本可锁定是拼写或标签未闭合问题。
VS Code 输入 <link rel=" 会自动提示合法值，善用补全能避免手误。
href 路径写错，浏览器根本找不到 CSS 文件
路径错误不是“样式没效果”，而是“样式压根没加载”。常见情形包括：
href=" css> 写成相对路径，但 HTML 文件不在根目录下（比如在 <code>/admin/index.html），实际会请求/admin/css/style.css，而非你预期的项目根目录下的路径- 用了绝对路径却漏了开头的
/：写成css/style.css是相对路径，而/css/style.css才是从域名根开始解析 - 本地双击 HTML 运行时用
file://协议，某些路径写法（如开头带/）会指向系统根目录，而非项目文件夹 - 你的类名（如
.btn-primary）有没有列出来？没出现，说明选择器字符串和 HTML 结构对不上 - 出现了但整行带删除线（strikethrough），说明被更高优先级规则覆盖，点开被划掉项看
specificity值和来源 -
class="header"对应 CSS 必须是.header，写成header{}（漏点号）就变成标签选择器，去匹配<header></header>元素 -
class="MyButton"和.mybutton{}不匹配（CSS 类选择器区分大小写） -
class="box btn"不能用.box.btn以外的选择器精准命中；写成.box .btn（中间有空格）就变成后代选择器，要求.btn在.box内部 - 响应头
Content-Type不是text/css：Nginx/Apache 若配置不当可能返回text/plain，浏览器拒绝解析 -
all: unset或all: revert这类全局重置规则切断继承链，让color、font-size等失效 - 框架如 Vue/React 的 scoped style 或 CSS-in-JS 自动加属性选择器前缀，导致你写的
.btn实际被编译为.btn[data-v-abc123]，外部定义的规则无法穿透 -
<style></style>标签被误放在外、注释里，或被 JS 动态移除，也会静默失效
推荐统一用显式相对路径：href="./css/style.css"，明确表示 CSS 文件与当前 HTML 在同一级目录下。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
选择器不匹配目标元素，样式“存在但不可见”
即使 CSS 文件成功加载（Network 显示 200），也可能因选择器未命中而无效。右键点击目标元素 → “检查”，在 Elements 面板选中该节点，再看右侧 Styles 面板：
注意这些细节：
CSS 文件返回 200 但样式仍不生效的隐藏原因
Network 显示状态码是 200，说明文件已加载，问题转向解析与层叠逻辑：
真正难排查的是那些不报错、不警告、只让样式“安静消失”的点——比如变量名拼错、少一个分号导致整段规则被丢弃、媒体查询条件不满足却忘了检查视口宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
