CSS样式失效主因是被更高优先级规则覆盖，需用DevTools检查specificity、DOM结构匹配、加载顺序、scoped作用域及语法错误。
检查 CSS 选择器是否被更高优先级规则覆盖
这是最常见原因：样式写了，也加载了，但没生效，大概率是别的规则“赢了”。浏览器渲染时会按 !important > 行内样式 > ID 选择器 > 类/属性/伪类 > 标签/伪元素 的顺序计算优先级（specificity）。比如你在 .card 上设了 color: red，但页面里某处写了 #user-profile .card { color: blue; }，后者优先级更高，红色就出不来。
- 打开 Chrome DevTools（F12），选中目标元素，看右侧面板的
Styles标签页，被划掉的声明就是被覆盖了 - 注意灰色文字的声明——它们来自其他来源（如用户代理样式、其他 CSS 文件），不一定是你写的
- 避免滥用
!important；真要用，得加在你自己的规则末尾，且确保它写在生效的 CSS 文件中（顺序也影响）
确认样式是否作用于当前 DOM 结构
CSS 是静态匹配的，不会“等待”元素出现。如果元素是 JS 动态插入（比如 Vue 的 v-if、React 的条件渲染、innerHTML 注入），而你的 CSS 规则写的是父容器或更早的静态结构，就可能不命中。
- 用 DevTools 的
Elements面板确认目标元素真实存在，且 class 名拼写完全一致（区分大小写，空格不能多不能少） - 检查是否误用了后代选择器（
.list li）但实际结构是.list > li（子元素），或反之 - 若用 Web Components 或 Shadow DOM，普通 CSS 默认无法穿透到 shadow root 内部，需用
::slotted()或:host等影子选择器
排查外部因素：加载顺序与作用域限制
CSS 文件加载失败、顺序错乱、或被 scoped 机制隔离，都会导致局部失效。
- 查看 Network 面板，确认你的 CSS 文件状态码是
200，不是404或500；路径别写错，比如./style.css和../style.css差一层就 404 - 多个
<link>标签中，后引入的 CSS 会覆盖前面同选择器的声明——把自定义样式放在框架样式（如 Bootstrap）之后引入 - Vue 单文件组件中启用了
scoped，那你的样式默认只对当前组件的根元素及其子元素生效，且会被自动添加属性选择器（如div[data-v-f3f3eg9]）；若想影响子组件，得用::v-deep（Vue 2）或:deep()（Vue 3）
验证浏览器兼容性与语法错误
某些 CSS 特性在旧浏览器中不支持，或者一个拼写错误会让整条规则静默失效（CSS 不报错，只是跳过）。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了未广泛支持的属性，比如
gap在 Flex 布局中 IE 完全不支持，Grid 中部分支持；用Can I use查兼容表 - 检查属性名和值是否拼错：
backgroud-color（少个 r）、dispaly: flex（display 拼错）、font-size: 12px;后多写了分号外的字符，都可能导致该行失效 - 用 CSS 验证工具（如 W3C CSS Validator）粘贴你的样式代码，快速定位语法问题
/* 示例：一个看似正常但容易失效的写法 */
.card {
background-color: #fff;
border-radius: 4px;
margin: 10px;
}
/* 如果 HTML 是 <div class="card active">...</div>，
而另一处写了 .active { background-color: #007bff !important; }，
那 .card 的背景色就会被覆盖——即使没写 !important，.active 的 specificity 也可能更高 */
局部 CSS 失效往往不是“没起作用”，而是“被别的东西压住了”或“根本没匹配上”。重点盯住 DevTools 的 Computed 和 Styles 面板，比反复改代码更省时间。特别留意动态渲染场景和 scoped 作用域这类隐性限制。
