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

Question

当摆弄样本代码样式时,我发现代码的样式将覆盖我的样式,因为它们将使用更高优先级的引用(例如:.div .class> .class).

我会遇到这样的情况:

我怎样才能找出哪种风格压倒了我的风格？ 我想避免使用,!important因为最终我会陷入同样的​​境地.

编辑:我不是在问为什么会这样.我已经知道优先权,因此我提到为什么.div .class优先级高于.class.我想跟踪实际使用的内容,而不是简单地告诉我它是"不活跃的".另外,我已经了解Chrome Developer,因为屏幕截图来自Chrome Developer.

编辑:实际问题已修复,但问题仍然存在... 是否有更简单的方法来查看导致覆盖的原因？

修复:我只是按正确的顺序需要选择器. .box首先,然后.box-blue.

Answer 1

在devtools中,在样式检查器中,选择Computed.找到您感兴趣的房产并单击它.您将看到适用于此属性的所有规则的列表,其中活动的规则位于顶部,每个规则都有一个文件/行引用,用于定义它.

请考虑以下HTML:

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

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

你会看到以下内容: