html – 你如何确定什么是压倒你的风格？

参见英文答案 > Chrome Developer Tools: How to find out what is overriding a CSS rule?
当使用样式代码的样式时，我发现代码具有将覆盖我的样式的样式，因为它们将使用更高优先级的引用(例如.div .class> .class)。

我会遇到这样的情况：

我怎么知道什么风格超越了我的风格？我想避免使用！重要，因为最终我会在同样的情况下。

编辑：我不是问为什么会发生这种情况。我已经知道优先级，所以为什么我提到.div .class的优先级高于.class。我想跟踪实际使用的是什么，而不是简单地告诉我它是“不活动的”。此外，我已经了解Chrome Developer，因为屏幕截图来自Chrome Developer。

编辑：实际问题修复，但问题仍然存在…有更简单的方法来看看是什么导致覆盖？

修复：我只是按正确的顺序需要选择器。 .Box首先，然后.Box-blue。

解决方法

在devtools中，在样式检查器中，选择“计算”。找到您感兴趣的财产，然后点击它。您将看到适用于此属性的所有规则的列表，其中活动的属性在顶部，每个都具有对其定义位置的文件/行引用。

考虑以下HTML：

<style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

您会看到以下内容：