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

Question

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

我会遇到这样的情况：

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

编辑：我不知道为什么会这样。我已经知道优先级，因此我提到.div .class的优先级高于.class。我想跟踪实际使用的内容而不是简单地告诉我它是＆＃34;不活动＆＃34;。此外，我已经了解Chrome开发人员，因为屏幕截图来自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>

您会看到以下内容：

Answer 2

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

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

Answer 3

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

Chrome也有View＆gt;开发人员＆gt;开发者工具。

如果你将鼠标悬停在屏幕上的某个项目上，他们会告诉你它的路径（html＆gt; body＆gt; div.blah＆gt; span.foo）以及应用于该项目的css样式。

Answer 4

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

您的覆盖样式会显示通过。要找出哪个选择器覆盖它，请查找相同规则的未敲击版本。

有时这就像看到一样简单：

<击> color: red;

不得不寻找一个选择器：

color: blue;

Chrome开发工具实际上会按优先级对选择器进行排序，因此如果您找到重写的样式，则可以保证覆盖将位于同一个选择器或其中一个选择器中。

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

Answer 5

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

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

Answer 6

在Firefox开发人员工具中，您可以在检查器中覆盖的属性附近单击一下找到它：

  

Overridden declarations

     

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

     

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

     

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

这是它的外观。观看视频，了解它的实际效果。

Answer 7

这是一个简单的解释。

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

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和style属性覆盖＃paragraph2，当然任何带有！important的选择器都将覆盖大部分内容。