css框架样式不生效的主因是路径错误、加载顺序冲突、类名版本不匹配、作用域隔离干扰；应先查network面板404、再验elements中computed styles、最后禁用样式定位覆盖源。
引入 CSS 框架后样式不生效，先看 link 标签路径是否正确
路径错误是最常见的原因，尤其是用相对路径时容易漏掉 ../ 或多写一层。浏览器控制台的 Network 面板里如果看到框架 CSS 文件状态是 404，基本就是路径问题。
- 检查 HTML 中
<link rel="stylesheet" href="...">的href值是否和实际文件位置一致，推荐用开发者工具的 Elements 面板右键“Open in Sources”直接跳转验证 - 构建工具（如 Vite、Webpack）中若通过
@import引入，路径需相对于当前 CSS 文件，不是 HTML 文件 - 使用 CDN 时确认链接可访问，比如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css是否能直接在浏览器打开
CSS 加载顺序冲突导致样式被覆盖
CSS 是从上到下解析的，后加载的规则会覆盖前面同优先级的选择器。框架样式被项目自定义样式盖掉，或反过来，都属于顺序问题。
- 确保框架的
<link>在自定义 CSS 之前引入，例如：<link href="bootstrap.css">→<link href="app.css"> - 如果用了 CSS-in-JS（如 styled-components）或 JS 动态插入样式，它们默认插入在
末尾，可能压过框架样式，需手动调整插入位置或提高选择器权重 - 避免在框架样式后用
!important写大量覆盖规则，这会让维护变困难，优先用更具体的选择器（如.btn.btn-primary而非.btn）
框架类名拼写或版本不匹配
不同版本的框架类名可能变化，比如 Bootstrap 4 的 text-center 在 v5 改为 text-align-center，Tailwind 的 flex-row 在 v3+ 已废弃。
- 查文档确认你用的类名是否属于当前引入的版本，不要凭记忆写旧类名
- 检查框架是否启用了 tree-shaking 或按需加载（如 UnoCSS、PurgeCSS），某些类名可能被误删，临时关掉优化看是否恢复
- 部分框架（如 Bulma）依赖
上的class（如has-text-centered需要），漏掉这个也会让样式“失效”
作用域隔离（如 Vue SFC 的 scoped）干扰框架全局样式
Vue 单文件组件加了 scoped 后，CSS 只作用于当前组件，不会影响框架提供的全局类（如 .container、.btn），但如果你在 <style scoped></style> 里写 .btn { color: red; }，它其实不会生效——因为框架的 .btn 不在该组件的 DOM 节点上。
立即学习“前端免费学习笔记（深入）”；
- 框架样式必须放在非
scoped的<style></style>块，或单独的全局 CSS 文件中引入 - 需要局部覆盖框架样式时，用深度选择器：Vue 3 用
:deep(.btn)，Vue 2 用>>>，否则写在scoped里等于没写 - React 中若用 CSS Modules，同理：框架类名不能写在
xxx.module.css里，得走import 'bootstrap/dist/css/bootstrap.css'这种全局引入方式
