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

Question

请注意:我找到了 this question以及this one ，但他们的两个答案都涉及编写和执行自定义 JS。我的问题是关于如何使用 Chrome 开发工具(或类似工具)实时完成同样的事情。

我有一个准遗留的 JVM 应用程序，它提供(并作为其构建管道的一部分创建)各种讨厌和凌乱的 CSS 文件。

我想知道 Chrome 开发工具(或 任何 其他现代 OSS webdev 工具)是否具有“逆向工程”功能，让您可以单击一个 HTML 元素并获得适用于它的所有 CSS 规则的列表。不仅如此，还有哪些规则优先于其他规则。

这样，当我需要调整我的 CSS 时，更少要弄清楚哪些规则来自哪些 CSS 文件，哪些规则实际上应用于事件元素运行时。

有什么想法吗？

Answer 1

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

element.style指内联样式。例如，如果我将所选元素修改为 <div class="container" style="background-color:#000">...</div> , background-color:#000将显示在该部分。

#content指的是div关联 ID 为“content”的元素。右侧选中的复选框表示它们已被应用且没有覆盖。您可以选中和取消选中这些以尝试使用样式，以便您可以看到应该在源代码中更改的内容。

html, body, div, span etc. 允许多个选择器使用相同的样式。该逗号分隔列表中的所有选择器都将具有样式，除了一些可能被其他 CSS 规则覆盖 - 在本例中为 margin。和 padding被更具体的 #content 覆盖选择器。

下一个 block 是用户代理样式。这些是浏览器应用的样式，每个浏览器可能应用不同的样式。如果您自己定义了更具体的规则，这可能会成为一个问题。许多人使用规范化器来确保浏览器之间的内容保持一致。查看Normalize

继承部分显示了从父样式继承的所有样式。在此示例中，text-align: left样式应用自 .container class 因为它是父元素和 #content元素没有明确覆盖它。

更新

• 添加了质量更高的屏幕截图(感谢@SLaks)
• 添加了用于访问的键盘快捷键(感谢@NKD)
• 添加了对右侧“样式”面板部分的简单说明。