快速定位元素并查看生效CSS规则，需在Elements面板悬停/点击元素或右键Inspect，再查看右侧Styles标签页中无删除线的规则；其来源如element.style或index.css:12可反向修改源码，勾选复选框可实时开关样式。
如何快速定位到目标元素并查看当前生效的CSS规则
直接在Elements面板里用鼠标悬停或点击页面元素，就能高亮对应HTML节点；右键选择“Inspect”也能跳转。关键是要看右侧“Styles”标签页——它显示该元素所有匹配的CSS规则，带删除线的是被覆盖的，没删线的是实际生效的。
- 注意检查每条规则末尾的
element.style（内联样式）、index.css:12（文件名+行号），方便反向修改源码 - 勾选/取消勾选某条CSS声明前的复选框，能实时开关效果，比改代码快得多
- 如果某条规则灰掉不可编辑，大概率是来自
@font-face、@keyframes或禁用的媒体查询，不是bug
修改CSS值后不生效？先确认是否被更高优先级规则覆盖
改了color: red却没变色，别急着刷新——点开“Computed”标签页，找到color属性，展开它，能看到所有影响该值的来源及计算顺序。真正起效的那条会标为“resolved”，其他被覆盖的会列在下面，并注明specificity（选择器权重）和来源位置。
- 常见干扰项：
!important声明、ID选择器（#header）比类名（.btn）优先级高、内联样式（style="..."）几乎无法被普通CSS覆盖 - 临时加
!important可验证是否是优先级问题，但别留在生产代码里 - 用
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac）打开命令菜单，输入“disable all styles”可一键关掉所有外部样式，只留HTML结构，快速排除干扰
调试响应式布局时，怎样模拟不同屏幕尺寸并查看媒体查询状态
顶部工具栏点Toggle device toolbar（Ctrl+Shift+M快捷键），进入响应式模式。左边下拉选设备预设，右边能手动调宽度/高度，还能切换横竖屏、网络条件甚至地理位置。
- 媒体查询是否激活，看“Styles”面板里对应规则是否变灰：灰了说明未匹配，亮着说明当前生效
- 在“Computed”面板底部，点
Media queries可展开所有已加载的媒体查询，并标出哪些正在匹配 - 如果改了
@media (min-width: 768px)里的样式却没反应，先确认当前视口宽度是否真≥768px——DevTools显示的宽度包含滚动条，有时差1px就失败
为什么改了CSS却看不到变化？检查这些隐藏因素
最常被忽略的是CSS自定义属性（--primary-color）和CSS-in-JS注入的样式。Elements面板默认只显示静态解析的CSS，动态插入的规则可能藏在<style>标签末尾或Shadow DOM里。
立即学习“前端免费学习笔记（深入）”；
- 展开
<head>下的所有<style>和<link>，尤其注意末尾新插入的<style>标签（常由框架如React/Vue注入） - 若元素在Shadow DOM中（比如
<video>控件、自定义组件），需点击右上角⋯→ “Show user agent shadow DOM”才能看到内部结构 - 启用“Rendering”面板（
Ctrl+Shift+P→ 输入“Rendering”），勾选“Paint flashing”，可高亮重绘区域——如果样式改了但没闪，说明根本没触发重绘，可能是属性不触发布局或渲染（如color只触发布局，transform走合成层）
