关键是要看computed面板中标为resolved的值，它才是浏览器最终采用的样式；动态弹出元素需用ctrl+shift+c激活选择工具，悬停触发后按esc设subtree修改断点，或纯css:hover直接勾选:hov按钮。
直接用 Elements 面板查样式，关键不是“看到哪些规则”，而是确认“哪条真在起作用”——element.style 优先级最高但只含内联样式；被划掉的规则未必失效，可能只是权重低；Computed 面板里标为 resolved 的那条才是浏览器最终采用的值。
怎么快速定位到动态弹出的元素（比如下拉菜单、Tooltip）
鼠标一移开就消失的元素，右键“检查”基本无效。必须靠 DevTools 主动捕获它。
- 按
Ctrl+Shift+C（Win/Linux）或Cmd+Shift+C（Mac）激活选择工具 - 悬停在触发区域（如按钮），等弹层出现 → 立刻按
Esc打开命令菜单 → 输入break on→ 选Break on subtree modifications - 更稳的办法：在 Elements 面板顶部点
⋯→Break on→Attribute modifications，再手动触发弹层 - 如果是纯 CSS 实现的
:hover，不用断点——选中触发元素后，在 Styles 面板右上角点:hov按钮，勾选:hover即可强制激活
为什么改了 CSS 却没变？重点看 Computed 面板的 resolved 值
Styles 面板显示的是“所有匹配规则”，Computed 面板才告诉你“浏览器到底用了哪个值”。别只盯着删掉没删掉。
- 在 Computed 面板顶部搜
color或display，展开后找标着 resolved 的那一行 - 点它旁边的箭头，能跳转到定义该值的原始 CSS 规则（含文件名和行号）
- 常见干扰项：
!important、ID 选择器（#header）比类名（.btn）权重高、element.style几乎无法被普通 CSS 覆盖 - 临时加
!important可验证是否是优先级问题，但别留进生产代码
class 名被划掉 / 灰掉 ≠ class 不存在，只是当前没生效
Elements 面板里 class 属性名带删除线，说明这个 class 被 CSS 优先级压制了，不是 HTML 写错了。
- 点开 Styles 面板，看同一条属性（比如
color: red）是否被另一条color: blue !important覆盖，来源是不是style.css:42 - 如果某条规则灰掉不可编辑，大概率来自
@font-face、@keyframes或未匹配的媒体查询 - Vue/React 中手动改 class 可能下一帧就被状态重置，这时要配合
Break on → Attribute modifications抓住 JS 修改时机 - Shadow DOM 里的元素不会直接出现在主 DOM 树，得手动展开
#shadow-root节点再查
最常被忽略的是 CSS 自定义属性（--primary-color）和 CSS-in-JS 注入的样式——它们可能藏在动态生成的 <style></style> 标签末尾，或者根本不在主文档流里。Elements 面板默认只解析静态 CSS，遇到这些得切到 Sources 面板搜 <style></style> 或用 Console 查 document.styleSheets。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
