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

196

好吧，这很简单。如果Chrome的开发人员工具向我显示样式已被覆盖，那么如何查看哪些CSS规则覆盖了样式？

我想知道是否有类似“向我展示什么可以替代此内容”之类的内容。

OBS： 请不要把我指向Firebug。

css google-chrome developer-tools inspector

— 拉蒙·K。
source

Chrome的开发工具也表明你的覆盖规则

— 佐尔坦·托特

Answers:

283

使用元素检查器的“ 计算样式”面板。展开感兴趣的属性，以查看适用规则的列表，以及赢得了哪个规则。

Chrome屏幕截图

— josh3736
source

对我来说，计算选项卡默认情况下处于打开状态，因此未作为选项卡列出，它应该具有标题“计算”，否则您可能需要很长时间了。

— MrFox

随着Chrome的发展，这项技术已经发生了一些变化。单击“属性”旁边的望远镜，而不是“扩展感兴趣的属性”，它将在“样式”选项卡中显示哪种样式获胜。

— 2015年

@intotecho：自从放大镜更改被吸住以来，Chrome 47已在“计算”标签中恢复了expando。crbug.com/496263

— josh3736

如果所有这些都被取消怎么办？可能是因为脚本？您如何找出是谁做的？

— darkgaze

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

— josh3736

您可以简单地查看未删除的相同名称的名称，请记住列表的重要性。

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

— 用户名
source

crtrl + shift + c并检查元素。然后，在右下角的框中找到不带线的样式。

在大多数情况下，替代项位于顶部（并且没有一行通过，因为该样式是“获胜”的样式）。

— 彼得·拉斯穆森
source

样式标记为！important并非如此

— JCorriveau '16