Chrome 开发者工具：如何找出覆盖 CSS 规则的内容？

Posted 2023-02-15

【中文标题】Chrome 开发者工具：如何找出覆盖 CSS 规则的内容？

【英文标题】：Chrome Developer Tools: How to find out what is overriding a CSS rule?

【发布时间】：2012-12-01 18:29:17

【问题描述】：

嗯，这很简单。如果 Chrome 的开发者工具显示样式被覆盖，如何查看覆盖它的 CSS 规则？

我想知道是否有类似“告诉我什么覆盖了这个”。

OBS： 请不要将我指向 Firebug。

【问题讨论】：

Chrome 的开发者工具还会向您展示最重要的规则

【参考方案1】：

您可以简单地查看那些没有被删除的同名，记住列表是按重要性排列的。

或者您可以查看计算的样式。它们将是实际应用的样式。

【参考方案2】：

crtrl + shift + c 并检查元素。然后在右下角的框中找到没有穿过它的样式。

在大多数情况下，覆盖位于顶部（并且没有一条线穿过它，因为这种样式是“获胜”样式）。

【讨论】：

样式被标记为 !important 时并非如此

【参考方案3】：

使用元素检查器的Computed Style面板。展开感兴趣的财产以查看适用规则的列表，以及哪一项获胜。

【讨论】：

对我来说，计算选项卡默认打开，因此没有列为选项卡，它应该有一个标题“计算”，否则你可能会寻找很长时间。

随着 Chrome 的进步，该技术发生了一些变化。而不是“展开感兴趣的属性”，而是单击属性旁边的窥镜，它将在“样式”选项卡中显示重新获得的样式。

@intotecho：Chrome 47 已经恢复了 Computed 选项卡中的 expando，因为放大镜更换失败了。 crbug.com/496263

如果全部取消怎么办？可能是因为剧本？你怎么知道是谁干的？

它仍然作为“元素”面板上的“计算”选项卡存在。