【发布时间】：2012-12-01 18:29:17
【问题描述】：
嗯，这很简单。如果 Chrome 的开发者工具显示样式被覆盖，如何查看覆盖它的 CSS 规则？
我想知道是否有类似“告诉我什么覆盖了这个”。
OBS： 请不要将我指向 Firebug。
【问题讨论】：
-
Chrome 的开发者工具还会向您展示最重要的规则
标签： css google-chrome developer-tools inspector
【发布时间】：2012-12-01 18:29:17
【问题描述】：
您可以简单地查看那些没有被删除的同名，记住列表是按重要性排列的。
或者您可以查看计算的样式。它们将是实际应用的样式。
【讨论】：
crtrl + shift + c 并检查元素。然后在右下角的框中找到没有穿过它的样式。
在大多数情况下，覆盖位于顶部（并且没有一条线穿过它，因为这种样式是“获胜”样式）。
【讨论】：
-
样式被标记为 !important 时并非如此
使用元素检查器的Computed Style面板。展开感兴趣的财产以查看适用规则的列表，以及哪一项获胜。
【讨论】：
-
对我来说，计算选项卡默认打开，因此没有列为选项卡，它应该有一个标题“计算”，否则你可能会寻找很长时间。
-
随着 Chrome 的进步，该技术发生了一些变化。而不是“展开感兴趣的属性”，而是单击属性旁边的窥镜，它将在“样式”选项卡中显示重新获得的样式。
-
@intotecho：Chrome 47 已经恢复了 Computed 选项卡中的 expando，因为放大镜更换失败了。 crbug.com/496263
-
如果全部取消怎么办？可能是因为剧本？你怎么知道是谁干的？
-
它仍然作为“元素”面板上的“计算”选项卡存在。