你如何确定什么是压倒你的风格？ [复制]答案

【问题标题】：How do you determine what is overriding your style? [duplicate]你如何确定什么是压倒你的风格？ [复制]
【发布时间】：2016-04-13 21:04:25
【问题描述】：

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

我会遇到这样的情况：

我如何找出覆盖我的风格的风格？我想避免使用!important，因为最终我会遇到同样的情况。

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

编辑：实际问题已解决，但问题仍然存在...... 有没有更简单的方法来查看导致覆盖的原因？

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

【问题讨论】：

万一有人好奇。这是 Angular 拖放脚本的改编代码。 marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/…我喜欢它的功能，但演示很糟糕......
如果您在样式检查器中只看高三行，您将看到border 的非划线条目，这是设置边框颜色的内容。那是活动的.
虽然在这种情况下是正确的，但如果样式从链接中获得更高的优先级，比如.container .box-blue，那么查找起来就不太方便了。

标签： html css developer-tools web-inspector

【解决方案1】：

有一些浏览器扩展可以帮助解决这个问题。我在 Firefox 中使用“Web Developer”，但还有很多其他的。

Chrome 也有视图 > 开发者 > 开发者工具。

如果您将鼠标悬停在屏幕上的某个项目上，它们会告诉您其路径 (html > body > div.blah > span.foo) 以及应用于该项目的 css 样式。

【讨论】：

你能解释一下你的答案吗？
@user3571366 更好吗？
谢谢...现在很清楚了..+1
如果您需要，这里是有关选择器优先级规则stackoverflow.com/questions/4072365/… 的信息。
我认为鼠标悬停在一个元素上会显示它的 CSS 样式是不正确的。无论如何，正如他所说，他已经知道那些工具。他有兴趣找出哪些规则凌驾于其他规则之上。

【解决方案2】：

这里是一个简单的解释。

例如，某些选择器会覆盖现有的选择器

p {
  color: green;
}
.Paragraphs {
  color: yellow;
}
#paragraph2 {
  color: red;
}

<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>

如图所示，选择器 p 被选择器 .Paragraphs 覆盖，选择器 #paragraph2 覆盖 .Paragraphs 并且样式属性覆盖 #paragraph2 ，当然任何带有 !important 的选择器都会覆盖大部分内容。

【讨论】：

嗯，不是一切。如果 !important 有两件事，其他规则将确定哪个更具体。
谢谢。我其实并不知道。我将对其进行编辑和更正。 :)
这并没有回答问题，即如何判断哪些样式被哪个覆盖。

【解决方案3】：

您可以在上面示例中使用的开发工具中向上或向下滚动样式选项卡，以找到覆盖.box-blue 的选择器。一旦您以另一种样式找到启用的border-color，您就可以确定覆盖它的选择器。

例如，当您使用border-color: red 设置.box-blue 的样式时，它可能会被具有可能相同属性的另一种样式border 覆盖。因为border: 1px solid blue 可能是border-width: 1px + border-style: solid + border-color: blue 的简写，那么它可能会覆盖以前的样式。

【讨论】：

【解决方案4】：

没有明确的方法可以推断出哪个选择器会覆盖给定的样式（据我所知），但开发工具界面足够直观，通常很容易解决。

您被覆盖的样式带有删除线。要找出覆盖它的选择器，请查找同一规则的未命中版本。

有时这就像看到一样容易：

~~color: red;~~

并且不得不寻找一个选择器：

color: blue;

Chrome 开发工具实际上是按优先级对选择器进行排序，因此，如果您发现一个被覆盖的样式，您可以保证覆盖将在同一个选择器中或在其上方的选择器之一中。

但您必须记住，有些规则是由其他规则组成的，并且您不会总是找到具有相同名称的对应规则。在您的示例中，您的 border-color 规则被上述选择器中的 border 规则覆盖。边框规则是指定border-width、border-style 和border-color 的简写。

【讨论】：

嗯，看起来border 中的“透明”覆盖了我的颜色，并且演示中的.box-blue CSS 低于.box，因此由于较低，因此优先考虑。我只是乱序地复制了它们……希望这不会那么痛苦，哈哈。
还不错。大多数情况下，您不会处理复合规则覆盖，尤其是当您开始将它们放在选择器的顶部时。

【解决方案5】：

在您的图像中，您可以看到 .box-blue 类的 border-color: #bce8f1 规则已被 border: 1px solid transparent 覆盖（我看不到选择器）。您可以在 Inspect 工具的选择器右侧看到被覆盖的 CSS 规则的 CSS 文件。

有时 CSS 规则可能会被 JavaScript 更改。它可能显示为内联 CSS。

【讨论】：

【解决方案6】：

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

考虑以下 HTML：

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

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

您会看到以下内容：

【讨论】：

不错。从来不知道这个......肯定会更多地使用它。
对于解决方案的上下文...如果我使用它，我会立即看到transparent 样式覆盖了颜色，然后单击链接将我带到带有样式的代码，让我在几秒钟内修复它，而不是在 StackOverflow 上提问 :)

【解决方案7】：

在 Firefox 开发者工具中，您可以在 Inspector 中被覆盖的属性附近一键找到它：

Overridden declarations

从 Firefox 43 开始，被覆盖的声明具有放大作用他们旁边的玻璃。单击放大镜过滤规则视图仅显示应用于当前节点并尝试设置的规则相同的属性：即给定的完整级联属性。

这样可以很容易地查看哪个规则覆盖了声明：

https://www.youtube.com/watch?v=i9mDVjJAGwQ

这是它的外观。观看视频以了解实际情况。

【讨论】：