css样式失效主因是优先级覆盖，需用开发者工具computed面板查删除线样式及specificity值，按内联>id>类/属性>标签顺序判断权重，注意!important作用范围、源码顺序、作用域隔离及第三方库样式机制。
样式没生效，大概率不是写错了，而是被别的选择器覆盖了——CSS 优先级和层叠规则在暗处起作用，得顺着它查。
怎么看哪个样式被覆盖了？
浏览器开发者工具（F12）的 Computed 面板是第一现场。点开某个元素，往下滑到 Styles 面板，注意带删除线的声明：那些就是被更高优先级规则干掉的。右侧的 Specificity 值（比如 0,1,1,1）会直接告诉你这个规则的权重构成。
- 优先级计算顺序固定：
内联样式 > ID 选择器 > 类/属性/伪类 > 标签/伪元素 -
!important会破坏正常层叠，但只对单个声明生效，且不能跨作用域“传染” - 同优先级时，后定义的规则胜出（源码顺序很重要）
为什么加了类名还是不生效？
常见陷阱是选择器太“松”或太“紧”。比如你写了 .btn-primary，但实际 DOM 是 <button class="btn btn-primary"></button>，而全局 CSS 里有一条 button.btn { color: red; } —— 它的优先级（0,0,2,1）就比你的 .btn-primary（0,0,1,0）高。
- 检查真实 HTML 结构，别靠记忆写选择器
- 避免无谓嵌套：
.header .nav .item a和.nav-item-link效果可能一样，但前者优先级高、可维护性差 - 用
:is()或:where()控制权重：:is(.a, .b) { color: blue; }的权重等同于其中最低的那个（.a），适合解耦
如何快速定位冲突来源？
在 Styles 面板里，每个生效的样式旁边都标着来自哪个文件和行号。点击就能跳转。重点看三点：
立即学习“前端免费学习笔记（深入）”；
- 有没有多个
color、display等同名属性反复出现？ - 有没有从
node_modules或 UI 框架（如 Ant Design、Bootstrap）注入的样式？它们常带高优先级 ID 或深度嵌套 - 有没有用
@layer显式分层？如果目标样式在@layer reset，而你的在@layer components，那后者默认更高
@layer reset {
* { margin: 0; }
}
@layer components {
.card { border: 1px solid #ccc; }
}改样式前先确认作用域是否干净
很多“失效”其实源于样式泄漏或未隔离。比如 Vue 的 <style scoped></style> 或 React 中的 CSS Modules 会自动加属性选择器（如 div[data-v-abc123]），这时候你手写的 div .title 就匹配不到组件内部真实渲染的节点。
- 检查是否启用了样式作用域，再决定要不要加
:deep()或::v-deep - Shadow DOM 内部样式完全隔离，外部选择器进不去，必须用
::part()或exportparts - 动态插入的 DOM（如弹窗、Tooltip）可能不在当前样式作用域内，需单独挂载样式或提升作用域
真正难的不是写新样式，而是看清已有样式在页面里怎么打架。多看 Computed 面板里的删除线，少猜；优先用 @layer 和低权重选择器建立秩序，而不是堆 !important。一旦涉及第三方库，先查它的样式注入机制，再动手改。
