用开发者工具定位样式覆盖源头：先看Styles面板中被划掉的规则及对应文件行号，注意“匹配的CSS规则”列表顺序，最下方为生效样式；检查!important、内联样式、第三方库高特异性选择器；按(a,b,c,d)四元组算权重，避免盲目堆砌选择器；优先使用CSS Modules或scoped隔离样式；动态样式需查Computed面板或Shadow DOM。
看清楚谁在覆盖谁：用浏览器开发者工具定位源头
样式没生效，第一反应不是改代码，而是打开浏览器的开发者工具（F12），选中元素，在 Styles 面板里逐条看哪些规则被划掉、哪些生效。被划掉的说明被更高优先级的规则覆盖了——这里能看到具体是哪个文件、哪一行、哪个选择器干的。
重点注意右上角显示的「匹配的 CSS 规则」列表，它按实际应用顺序从上到下排列；最底下那条才是最终生效的。点击每条规则左侧的复选框可以临时禁用，快速验证是否是它导致冲突。
- 检查是否有
!important打乱了正常优先级计算 - 留意内联样式（
style="..."）天然比外部样式表优先级高 - 确认是否引入了第三方 UI 库（如 Ant Design、Element Plus），它们的默认样式可能通过高特异性选择器悄悄覆盖你的规则
算清楚优先级：选择器权重不是“越长越赢”
CSS 优先级不是简单比选择器长度，而是按四元组 (a,b,c,d) 计算：
-
a：内联样式数量（算 1，否则 0） -
b：ID 选择器数量（如#header） -
c：类、属性、伪类数量（如.btn、[type="text"]、:hover） -
d：元素名、伪元素数量（如div、::before）
比较时从左到右，数值大的胜出。例如：#nav .item a 是 (0,1,2,1)，而 div#nav ul li a 是 (0,1,0,4)，前者胜出——尽管后者更长。
立即学习“前端免费学习笔记（深入）”；
常见误区：.container .list li.active 和 .container > .list > li.active 权重完全一样（都是 (0,0,3,0)），但后者更严格限制 DOM 结构，容易因 HTML 变动失效。
避免硬碰硬：用更可控的方式组织样式
靠堆选择器特异性或加 !important 解决覆盖问题，短期有效，长期难维护。更可持续的做法是控制作用域和加载顺序：
- 组件化开发中，优先用 CSS Modules 或
<style scoped>（Vue）隔离样式，避免全局污染 - 确保样式表引入顺序合理：基础重置（reset）→ 通用工具类 → 组件样式 → 页面专属样式
- 慎用通配符或全局标签样式（如
button { ... }），它们极易被后续规则意外覆盖或反向覆盖其他地方 - 重构高权重选择器：把
body .page #main .content ul li a:hover拆成语义清晰的类名，如.nav-link:hover
查不到来源？可能是动态插入或 Shadow DOM
如果开发者工具里找不到覆盖源，别只盯着 Styles 面板，还要检查：
- JS 是否动态设置了
element.style.xxx（内联样式），这类修改会出现在Computed面板的顶部，且无法在Styles中直接编辑 - 元素是否在 Shadow DOM 中（比如 Web Components 或某些 UI 框架封装的组件），此时需切换到对应 Shadow Root 下查看样式
- 是否存在 CSS-in-JS 库（如 styled-components、emotion）注入的样式，它们通常以
<style data-styled="...">形式存在，需展开查看生成的选择器
Shadow DOM 内部样式默认不继承外部规则，也不受外部选择器影响——这是隔离机制，不是 bug。
真正难排查的，往往是跨技术栈叠加的样式（比如 Vue 的 scoped + Tailwind 的 utility class + 手写 CSS），这时候得一层层关掉、对比、还原，而不是凭经验猜。
