当然可以！Chrome开发者工具早就为这个场景做了贴心设计，我来一步步教你怎么快速定位到覆盖样式的那条规则：

• 第一步：定位目标元素
  按下F12或者右键页面元素选择「检查」打开DevTools，在左侧「Elements」面板的DOM树里选中你要排查的元素，右侧「Styles」面板会自动列出所有作用于该元素的CSS规则。

• 第二步：找到被覆盖的规则
  在「Styles」面板里，被其他规则覆盖的样式会显示成灰色带删除线的状态。直接点击这条带删除线的规则。

• 第三步：查看覆盖你的那条规则
  点击之后，DevTools会立刻帮你定位到真正生效的那条规则——它就是把原来样式覆盖掉的“幕后黑手”。你还能看到这条生效规则所在的CSS文件名和具体行号，点击文件名就能跳转到「Sources」面板查看完整的代码上下文。

• 额外实用技巧
  如果你想搞明白为什么这条规则能覆盖另一条，可以鼠标悬停在生效规则的选择器上，DevTools会弹出提示框显示它的优先级得分（Specificity Score）；另外，你也可以在「Styles」面板顶部的筛选框里输入属性名（比如color），快速过滤出所有和这个属性相关的规则，对比起来更清晰。

顺便提一句：CSS的覆盖逻辑主要看优先级，内联样式>ID选择器>类/伪类/属性选择器>元素选择器，带!important的规则优先级最高（不过尽量少用它，会增加维护成本）。

内容的提问来源于stack exchange，提问作者Ole