上线后CSS选择器失效，大概率是缓存、路径错误、构建产物结构变化或第三方样式覆盖所致；需检查Network面板是否404、真实class名是否被哈希化、加载顺序是否被库样式覆盖，以及CDN/浏览器缓存是否未更新。
上线后CSS选择器失效，大概率不是代码写错了，而是环境差异放大了本地被掩盖的问题——比如缓存、路径、构建产物结构或第三方样式覆盖。
检查标签是否因路径错误导致404
CSS文件根本没加载进来，样式当然不会生效。本地开发服务器常自动处理相对路径，但线上部署后，href值可能指向不存在的位置。
- 在 Chrome DevTools 的
Network面板中筛选css，确认你的样式文件状态码是200，而不是404或403 - 常见陷阱：
href="style.css"在/admin/user.html下会请求/admin/style.css；改用绝对路径href="/style.css"更可靠 - Vite/Webpack 构建后 CSS 常输出到
/assets/index.abc123.css，但 HTML 里仍写style.css→ 必然 404
确认构建工具是否重命名或作用域化 class 名
Webpack、Vite、Vue CLI 等工具默认启用 CSS Modules 或 scoped 样式，在生产环境会自动添加哈希或属性选择器，导致你写的 .card__title 实际匹配的是 .card__title[data-v-f3f3eg9]。
- 打开 Elements 面板，右键目标元素 →
Copy → Copy outerHTML，粘贴出来看真实class值是否和你写的完全一致（包括大小写、连字符、空格） - Vue 单文件组件中用了
，则子组件的根元素不会被父组件样式穿透；需用:deep(.child)显式声明 - React 中若用
css-loader启用了modules: true，则import styles from './Card.module.css'是必须的，直接写.card不会生效
排查第三方 UI 库样式覆盖或加载顺序错乱
本地开发时你可能手动引入了 Bootstrap 或 Element Plus，但构建后它们的 CSS 被打包进 vendor.css 并放在你自己的样式之前——结果你的规则被更高优先级的库样式盖掉。
- 在 Styles 面板里找你写的规则，如果被划掉，悬停看提示：若显示
specificity is lower than another rule，且来源是element-plus.css或类似文件，就是它干的 - Ant Design、Naive UI 等库常用
#app .ant-btn这类高权重选择器，比你写的.btn（权重 0,0,1,0）高得多 - 确保自定义 CSS 的
在 HTML 中排在所有第三方库之后；Vite/webpack 中可通过import顺序控制，但最终产出顺序以 HTML 为准
别忽略浏览器缓存和 CDN 缓存
本地改完立刻生效，是因为开发服务器禁用缓存；上线后，浏览器、CDN、甚至反向代理（如 Nginx）都可能缓存旧的 CSS 文件。
- 强制刷新无效？试试无痕窗口，或在 Network 面板勾选
Disable cache再刷新 - 查看响应头：
Cache-Control: max-age=31536000表示强缓存一年；若你刚更新了文件但没改文件名，用户就永远拿不到新样式 - 解决方案：构建时启用 CSS 文件名哈希（如
style.a1b2c3.css），或部署后清空 CDN 缓存
真正卡住的点往往不在 CSS 本身，而在“谁加载了它”“它匹配的是谁”“谁先谁后”这三层。本地能过，只说明环境宽容；上线失效，才是真实约束浮出水面的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
