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

【问题标题】：Reverse engineering which CSS rules apply to a given DOM element?逆向工程哪些 CSS 规则适用于给定的 DOM 元素？
【发布时间】：2016-09-13 20:16:03
【问题描述】：

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

我有一个准旧版 JVM 应用程序，它提供（并作为其构建管道的一部分创建）各种令人讨厌和凌乱的 CSS 文件。

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

这样，当我需要调整我的 CSS 时，less 很容易找出哪些规则来自哪些 CSS 文件，哪些规则实际上被应用于实时元素运行时。

有什么想法吗？

【问题讨论】：

【解决方案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 为“内容”。右侧选中的复选框表示它们已被应用而没有覆盖。您可以选中和取消选中这些以使用样式，以便查看应该在源代码中更改的内容。

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

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

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

更新

【讨论】：

你应该打开抗锯齿。
我只是想补充一下，Chrome DevTools 可以通过按 F12 来访问，以防您 (@johnniebenson) 不熟悉使用该工具。
很棒的答案，感谢@Gideon (+1)。所以在你的截图中，在右边，我看到（基本上）6个信息部分似乎都对应于左边突出显示的<div/>：（1）element.style { ... }，（2）#content { ... }，（3） html, body, div, ..., (4) div { display: block; }, (5) .container { ... } 和 (6) 另一个 html, body, div, ... 部分。你有没有机会给我一个关于这些部分代表什么以及它们与突出显示的<div/> 的关系的精彩片段？再次非常感谢！
@Smeeb 我根据我所知道的在我的答案中添加了一些关于这些部分的信息。

【解决方案2】：

现代浏览器有一个“检查器”选项，允许您选择一段生成的 HTML 并查看应用于它的 CSS。每一个都略有不同，但通常按 F12 即可启动。

【讨论】：