css样式失效主因是优先级被覆盖而非书写错误，应通过开发者工具检查被划掉的样式及其specificity，采用精准选择器、业务类名、属性选择器、伪类等方式提权，慎用但合理使用!important，并通过bem命名、css自定义属性、样式作用域等重构降低嵌套依赖。
样式没生效，大概率是 CSS 优先级被更上层的规则覆盖了，不是写错了，而是“没赢过”。多层嵌套本身不直接导致失效，但会间接拉高其他选择器的权重（比如 .container .list .item a 这种长链就比 .btn 权重大得多），让你后来加的简单类名根本压不住。
检查并对比实际生效的选择器
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里看哪些样式被划掉、哪些生效。重点看每条规则右边显示的“来源”和具体选择器——你写的样式可能就在那儿，只是前面带了一条横线（表示被覆盖）。
- 鼠标悬停在被划掉的样式上，会提示“specificity is lower than another rule”
- 点开对应 CSS 文件链接，跳转到源码，对照上下文：是不是父容器加了
!important？有没有更高权值的 ID 或内联样式？
用更精准（而非更长）的选择器提升权重
别盲目堆嵌套，比如把 .card .title 改成 .card > .title 或 .card__title（BEM 命名），既语义清晰，又避免无意中拉低可维护性。真正需要提权时，优先用这些方式：
- 加一个有业务意义的类名：
<div class="user-card user-card--highlight">，然后写 <code>.user-card--highlight .name - 利用属性选择器微调：
[data-role="header"] h2比单纯h2权重高 - 必要时用伪类增加一层：
.btn:not(.disabled)比.btn多 10 点 specificity - 只加在最终要生效的声明末尾：
color: #ff6b6b !important; - 避免写成
.modal .close-btn !important { ... }—— 把!important放在选择器上无效 - 团队项目建议约定前缀，比如
/* [override] */注释，方便追溯 - 把“深层依赖”变成“显式声明”：原写法
.page .section .content p→ 改为.content-text独立类名 - 用 CSS 自定义属性接管变量：
--text-primary: #333;，让颜色/间距等统一由根节点控制，减少靠嵌套继承 - 启用 CSS Scope（如 Vue 的
scoped、React 的 CSS Modules），让样式天然隔离，嵌套再深也不怕外溢
慎用 !important，但该用时别硬扛
它不是毒药，是止痛片。组件库覆盖、主题色强制替换、第三方 UI 微调等场景，合理使用 !important 反而干净利落。
立即学习“前端免费学习笔记（深入）”；
重构嵌套逻辑，从源头减少冲突
深层嵌套往往暴露的是结构或命名问题。试试这几种轻量重构：
基本上就这些。优先级不是玄学，是可查、可算、可控的。与其反复加层级碰运气，不如打开 DevTools 看一眼真实权重，再决定是改选择器、加修饰类，还是干脆换个组织方式。
