在 chrome devtools 中，应查看 styles 面板右侧按实际应用顺序排列的样式列表，生效规则位于下方且无删除线，点击小箭头可定位文件与行号；!important 会干扰优先级推演，工具类冲突需反向从样式查类名及来源。
Chrome DevTools 里怎么看 class 的实际生效顺序
浏览器渲染时，CSS 优先级不是简单按“写在后面就赢”，而是按选择器权重 + 声明顺序共同决定。直接看 Computed 面板只能看到最终值，看不出哪条规则压倒了哪条。Styles 面板右侧的样式列表才是关键：它按实际应用顺序从上到下排列，越靠下的规则，权重相同或更高时越可能生效。
- 点开元素后，在
Styles面板中找你关心的属性（比如color或margin），被划掉的那行就是被覆盖的 - 注意每条规则前面的小箭头：点开会显示该规则来自哪个文件、第几行（例如
tailwind.css:1234或index.scss:45） - 如果多个类名都设置了同一属性，真正起效的那条会没有删除线，且位置更靠下（前提是权重没差太多）
为什么加 !important 后反而更难定位源头
!important 会强行拔高单个声明的优先级，但它不改变规则在 Styles 面板里的排序逻辑——反而会让原本被覆盖的规则“复活”并挤到下面，掩盖真实冲突链。
- 它让权重计算失效，导致你无法通过常规优先级推演还原覆盖路径
- 工具类库（如 Tailwind、Bootstrap）极少用
!important，一旦你在自己的 CSS 里加了，就大概率成了唯一能压过它们的规则，但你也失去了回溯“谁本来该赢”的线索 - 真遇到必须用
!important的场景（比如第三方组件内联样式），先在 DevTools 里右键禁用它，再刷新观察原始覆盖关系
工具类框架（Tailwind/UnoCSS）里怎么快速锁定冲突类
这类框架生成的类名语义弱、数量大，靠肉眼扫 class="..." 属性几乎无效。得反向查：从样式入手，定位到类名，再确认它在哪定义。
- 在
Styles面板中找到生效的规则，看它的选择器是不是类似.text-red-500或.p-4—— 这就是冲突的工具类 - 右键该规则 →
Reveal in Sources，能跳转到对应 CSS 文件；如果是 UnoCSS，可能指向uno.css或构建产物中的某一行 - 注意同名工具类可能有多个来源：比如
md:p-4和p-4同时存在，响应式断点会改变生效时机，别只盯着默认尺寸
自定义 CSS 和工具类混用时最常踩的坑
不是所有覆盖都是“谁写在后面谁赢”。当自定义样式和工具类共存，最容易误判的是 源码顺序 ≠ 实际注入顺序。
- 构建工具（Vite、Webpack）可能把
node_modules里的 CSS 提前注入，而你的main.css反而在后面，导致你以为“我写的在后面所以该生效”，其实它加载更晚但权重更低 - 使用
@layer（如 Tailwind 的@layer components）能显式控制层叠顺序，但必须配合!apply或正确层级调用，否则毫无作用 - 用
[data-theme="dark"] .btn这种带属性选择器的自定义规则，权重天然高于.btn，但低于.dark .btn—— 工具类是否支持暗色模式前缀，直接影响谁胜出
真实项目里，样式覆盖问题往往卡在“以为知道谁赢了，其实根本没看清权重计算过程”。多花十秒点开 Styles 面板右侧的每个小箭头，比反复改 class 名快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
