您如何确定什么才是您的风格？ [英] How do you determine what is overriding your style?

问题描述

在摆弄示例代码的样式时，我发现代码中的样式将覆盖我的样式，因为它们将使用更高优先级的引用（例如： .div .class > .class ）。

When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class).

我会遇到这样的情况：

我如何确定哪种样式覆盖了我的样式？我想避免使用！important ，因为最终我最终会遇到相同的情况。

How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same situation.

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

I'm not asking why this is happening. I already know about priority, hence why I mentioned that .div .class has a higher priority than .class. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.

编辑：实际问题已解决，但问题仍然存在... 是

actual problem fixed, but the question still remains... is there an easier way to see what causes the override?

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

Fix: I just needed the selector in the proper order. .box first, then .box-blue.

推荐答案

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

In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.

请考虑以下HTML：

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

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

您将看到以下内容：

这篇关于您如何确定什么才是您的风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！