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

Question

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

我想知道是否有类似于“显示覆盖此内容的规则”的功能。

OBS：请不要引导我使用Firebug。

- Ramon K.

---

Chrome的开发者工具还可以显示覆盖规则。 - Zoltan Toth

Answer 1

使用元素检查器中的计算样式面板。展开感兴趣的属性以查看适用规则列表及其胜出情况。

- josh3736

---

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

技术随着Chrome的进步有了一些变化。现在不需要点击“展开感兴趣的属性”，只需单击该属性旁边的放大镜图标，就可以在“样式”选项卡中看到哪个样式胜出了。 - intotecho

Chrome 47已经恢复了Computed标签中的展开式，因为放大镜的改变很糟糕。[crbug.com/496263] - josh3736

它仍然存在于元素面板上的“计算”选项卡中。 - josh3736

@josh3736，也许我的CSS中有!important，但在计算或其他地方找不到任何覆盖它的内容。 - derloopkat

Answer 2

您可以简单地查看那些名称相同但未被划掉的样式，记住列表是按重要性排序的。

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

- user1902091

Answer 3

按下 crtrl + shift + c 然后检查元素。在右下角的盒子里找到没有被划掉的样式。

大多数情况下覆盖在顶部（并且没有被划掉，因为这种样式是“获胜”的）。

- Peter Rasmussen

---

当一个样式被标记为!important时，并不是所有情况都适用。 - Noone