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

前端之家收集整理的这篇文章主要介绍了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>

您会看到以下内容

猜你在找的HTML相关文章