你如何确定哪些内容覆盖了你的样式？

Question

当我尝试修改示例代码的样式时，我发现代码使用了更高优先级的引用来覆盖我的样式，例如：.div .class > .class，因此我会遇到这样的情况：

我该如何找出哪个样式覆盖了我的样式？我想避免使用!important，因为最终我会陷入同样的境地。

编辑：我不是在问为什么会发生这种情况。我已经知道优先级的问题，因此我提到.div .class的优先级高于.class。我想追踪实际使用的内容，而不仅仅告诉我它是“不活动的”。另外，我已经知道Chrome开发者工具，因为截图来自Chrome开发者工具。

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

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

- Nelson

---

如果有人感兴趣的话，这是一个适用于Angular拖放脚本的修改代码。http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested我喜欢它的功能，但演示很糟糕... - Nelson

如果您在样式检查器中向上查看三行，您将看到一个未被划掉的 border 条目，这就是设置边框颜色的内容。那个是当前生效的。 - user663031

尽管在这种情况下是正确的，但如果样式链中包含了更高优先级的选择器，例如.container .box-blue，那么查找将不再像之前那样方便。 - Nelson

Answer 1

在开发工具中，进入样式检查器，在计算选项卡中选择。找到您感兴趣的属性并点击它。您将看到适用于该属性的所有规则列表，其中活动规则位于顶部，并且每个规则都有一个文件/行引用，指示其定义位置。

考虑以下HTML代码：

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

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

你会看到以下内容：

- user663031

---

不错。从来不知道这个...肯定会更多地使用它。 - Nelson

针对解决方案的背景... 如果我使用这个，我会立即看到transparent样式覆盖了颜色，并且点击链接会带我到具有该样式的代码，让我在几秒钟内修复它，而不是在StackOverflow上提问 :) - Nelson

Answer 2

你可以在使用Dev Tools的样式选项卡中向上或向下滚动，以找到覆盖.box-blue选择器的样式。一旦发现另一个启用的border-color，那么就可以确定哪个选择器正在覆盖它。

例如，当你使用border-color: red为.box-blue添加样式时，它可能会被另一个具有可能相同属性的样式覆盖，如border: 1px solid blue。因为border: 1px solid blue可能是border-width: 1px + border-style: solid + border-color: blue的简写形式，所以它可能会覆盖之前的样式。

- Bogie

Answer 3

有浏览器扩展可以帮助这个问题。我在Firefox中使用“Web Developer”，但还有许多其他扩展可供选择。

Chrome也有“查看”>“开发人员”>“开发人员工具”。

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

- John Hascall

---

你能否详细解释一下你的答案？ - Nimeshka Srimal

@user3571366 更好了吗？ - John Hascall

谢谢，现在清楚了，加一。 - Nimeshka Srimal

这里有关于选择器优先级规则的信息，如果需要可以参考 https://dev59.com/Em855IYBdhLWcg3w7pCg。 - John Hascall

我不认为鼠标悬停在一个元素上会显示其CSS样式是正确的。无论如何，他已经知道了那些工具，他想知道哪些规则正在覆盖其他规则。 - user663031

这取决于工具。在Chrome开发者工具中，您需要单击大纲中的项目才能查看样式信息。 - John Hascall

Answer 4

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

您被覆盖的样式显示为删除线。要找出哪个选择器覆盖它，请查找同一规则的未删除版本。

有时这很容易看到：

color: red;

需要查找带有以下选择器的内容：

color: blue;

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

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

- Dan Prince

---

哦，看起来 border 中的 "transparent" 覆盖了我的颜色，并且演示中 .box-blue 的 CSS 低于 .box，因此由于位置较低而具有优先权。我只是按错误顺序复制它们...希望这可以少些痛苦哈哈。 - Nelson

这还不算太糟糕。大多数情况下，你不需要处理复合规则覆盖，特别是如果你开始将它们保持在选择器的顶部。 - Dan Prince

Answer 5

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

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

- NiroshanJ

Answer 6

在Firefox开发者工具中，您可以在检查器中覆盖的属性旁边一键找到它：

覆盖声明

从Firefox 43开始，覆盖的声明旁边有一个放大镜。单击放大镜以过滤规则视图，仅显示尝试设置相同属性的当前节点适用的规则：也就是给定属性的完整级联。

这使得很容易看出哪个规则正在覆盖声明：

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

以下是它的外观。查看视频以了解其操作方式。

- user

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 的选择器都会在大多数情况下覆盖其他所有内容。

- HTMLNoob

---

好的，并非“所有”情况下都如此。如果有两个带有!important属性的元素，则其他规则将确定哪个更具体。 - Adam D. Ruppe

谢谢。我之前并不知道这个。我会进行编辑并修正的。 :) - HTMLNoob

这并没有回答问题，即如何确定哪些样式被覆盖了。 - user663031