最常见的原因是外部CSS文件未正确引入，包括路径错误、加载顺序不当、缓存问题或MIME类型不匹配，需检查link位置、href路径、Network响应及样式覆盖情况。
CSS样式不生效，但浏览器控制台没报错，最常见的原因之一就是外部CSS文件没被正确引入。用 <link> 方式引入时，路径错误、加载顺序、缓存或MIME类型问题都可能导致样式“看不见”。
检查link标签是否写在head中且位置合理
<link> 标签应放在 内，且最好在 <title></title> 之后、<script></script>（尤其是操作DOM的脚本）之前。如果CSS在JS之后引入，而JS立即修改了元素样式或类名，可能造成样式被覆盖或来不及应用。
- ✅ 正确示例：
我的页面
- ❌ 错误做法：把
<link>放在底部，或放在会动态改样式的<script></script>后面
确认href路径准确，区分相对与绝对路径
路径写错是高频问题。浏览器不会报JS那样的语法错误，但会在Network面板里显示404（文件未找到）。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 如果HTML和CSS在同一目录：用
href="style.css" - 如果CSS在
css/style.css：用href="css/style.css"（相对HTML文件位置） - 避免用
href="./css/style.css"这类冗余写法，除非有特殊需求；更别写成href="CSS/style.css"（大小写敏感，尤其在Linux服务器上） - 开发时可在浏览器开发者工具的 Network → Filter 输入 “css”，看该文件是否返回 200，还是 404 或 403
留意CSS加载是否被缓存或阻塞
改了CSS却没变化？很可能是浏览器缓存了旧版本。
立即学习“前端免费学习笔记（深入）”；
- 强制刷新：Windows/Linux 按 Ctrl + F5，Mac 按 Cmd + Shift + R
- 开发阶段可在
<link>中临时加版本号防缓存：
- 检查Network面板中该CSS响应头：
Content-Type必须是text/css；如果是text/plain，服务器配置有问题，需修正MIME类型
验证CSS规则是否被覆盖或选择器不匹配
即使文件成功加载，样式也可能“失效”——实际是被其他规则覆盖，或选择器根本没选中目标元素。
- 打开开发者工具（F12），选中目标元素，在Styles面板查看哪些样式被划掉（strikethrough），点开对应CSS文件链接，确认规则来源
- 检查选择器优先级：例如
#header .nav a比.nav-link优先级高；内联样式和!important也会压制外部CSS - 确认HTML元素确实存在，且class/id拼写一致（注意空格、连字符、大小写）
