反向工程哪些CSS规则适用于给定的DOM元素？

请注意：我也找到了，但他们的答案都涉及编写和执行定制JS。我这里的问题是关于如何使用Chrome开发工具（或类似工具）实时完成同样的事情

我有一个类似于传统的JVM应用程序，它提供（并作为其构建管道的一部分创建）各种令人讨厌和混乱的CSS文件

我想知道Chrome开发工具（或任何其他现代OSS webdev工具）是否具有“反向工程”功能，允许您单击HTML元素并获得适用于该元素的所有CSS规则的列表。不仅如此，还有哪些规则凌驾于其他规则之上

这样，当我需要调整CSS时，找出哪些规则来自于哪些CSS文件以及哪些规则在运行时实际应用于live元素就不那么麻烦了

有什么想法吗？

是的，在Chrome DevTools（Windows中的F12/OSX中的Option+Cmd+I）的元素面板中，您可以单击元素并查看右侧应用的CSS规则。覆盖的样式或类被划掉，您可以看到CSS规则来自的文件名。见下文：

element.style

指内联样式。例如，如果我将所选元素修改为

…

，

背景色：#000

将显示在该部分中

#content

指的是

div

元素，其关联id为“content”。右侧选中的复选框表示已应用这些复选框而未进行覆盖。您可以勾选或取消勾选这些样式，以便在源代码中看到应该更改的内容

html、body、div、span等允许多个选择器使用相同的样式。该逗号分隔列表中的所有选择器都将具有样式，但有些可能被其他CSS规则覆盖-在这种情况下，
边距
和
填充
被更具体的
内容
选择器覆盖

下一个块用于用户代理样式。这些是浏览器应用的样式，每个浏览器可以应用不同的样式。如果您自己定义了更具体的规则，这可能是一个问题。许多人使用规范化器来确保浏览器之间的一致性。退房

“继承”部分显示从父样式继承的所有样式。在本例中，
text align:left
样式是从
.container
类应用的，因为它是父元素，
#content
元素没有显式覆盖它

更新


添加了质量更好的屏幕截图（感谢@SLaks）
添加了用于访问的键盘快捷键（感谢@NKD）
添加了右侧“样式”面板各部分的简单说明
现代浏览器有一个“inspector”选项，允许您选择一段生成的HTML并查看应用于它的CSS。每一个都略有不同，但通常按F12键会让您继续使用。
大多数浏览器开发工具都有此功能。你没看过吗？你应该打开反锯齿。我只是想补充一点，如果你（@johnniebenson）不熟悉使用该工具，可以通过点击F12访问Chrome DevTools。回答很棒，谢谢@Gideon（+1）。因此，在您的屏幕截图中，在右侧，我看到（基本上）6部分信息，它们似乎都与左侧突出显示的
相对应：（1）
element.style{…}
，（2）
#content{…}
，（3）
html，body，div，
，（4）
div{display:block；}
，（5）
容器{…}
和（6）另一个
html，body，div，…
部分。你有没有可能给我一个突出显示的卷轴，看看这些部分代表了什么，以及它们与突出显示的
的关系？再次非常感谢@根据我所知道的，我已经在我的回答中添加了一些关于这些部分的信息。