Html 您如何确定什么是覆盖您的样式？

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

.div.class

.class

）

我会遇到这样的情况：

我如何找出什么样式覆盖了我的样式？我想避免使用

！重要的

，因为最终我也会遇到同样的情况

编辑：我不是问为什么会这样。我已经知道优先级，因此我提到

.div.class

的优先级高于

.class

。我想追踪实际使用的东西，而不是简单地告诉我它是“不活动的”。另外，我已经知道ChromeDeveloper，因为屏幕截图来自ChromeDeveloper

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

修士：我只需要按正确的顺序选择<代码>先是.box，然后是

.box蓝色

---

有一些浏览器扩展可以帮助实现这一点。我在Firefox中使用“WebDeveloper”，但还有很多其他功能

Chrome还有视图>开发者>开发者工具

---

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

下面是一个简单的解释

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

p{
颜色：绿色；
}
.段落{
颜色：黄色；
}
#第2段{
颜色：红色；
}

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

您可以在上面示例中使用的开发工具中向上或向下滚动“样式”选项卡，以找到覆盖选择器的

.box blue

。一旦在另一种样式中找到启用的

边框颜色

，则可以确定覆盖它的选择器

---

例如，当您使用

边框颜色：红色设置
.box蓝色
的样式时，可以使用另一种可能具有相同属性的样式
border
覆盖该样式。因为
border:1px solid blue
可能是
border width:1px
+
border style:solid
+
border color:blue
的缩写，所以它可能会覆盖以前的样式。
没有确定的方法来推断哪个选择器覆盖给定的样式（据我所知），但是dev工具界面非常直观，因此通常可以很直接地进行计算

您的覆盖样式显示为一个穿透。要找出哪个选择器覆盖了它，请查找同一规则的非压缩版本

有时这很容易看到：

颜色：红色

并且必须寻找具有以下特征的选择器：

颜色：蓝色

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

但是您必须记住，有些规则是由其他规则组成的，您不会总是找到同名的相应规则。在您的示例中，
边框颜色
规则被上述选择器中的
边框
规则覆盖。边框规则是指定
边框宽度
、
边框样式
和
边框颜色
的简写，在图像中可以看到
。框蓝
类的
边框颜色：#bce8f1
规则已被
边框：1px实心透明
覆盖（我看不到选择器）。您可以在Inspect工具的选择器右侧看到被覆盖的CSS规则的CSS文件

有时CSS规则可能会被JavaScript更改。它可能显示为内联CSS。
在devtools的样式检查器中，选择“计算”。找到您感兴趣的属性并单击它。您将看到应用于此属性的所有规则的列表，其中活动规则位于顶部，每个规则都有一个文件/行引用，指向定义它的位置

考虑以下HTML：

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

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


#foo{color:red；}
p{颜色：蓝色；}
我是什么颜色的


您将看到以下内容：

在Firefox开发者工具中，您只需在Inspector中的Overrided属性附近单击一下即可找到：

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

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


这是它的样子。查看视频，看看它的实际效果

请您再解释一下您的答案好吗？@user3571366更好？谢谢…现在已经很清楚了..+1如果您需要，这里是有关选择器优先级规则的信息。我不相信将鼠标移到元素上显示其CSS样式是正确的。无论如何，正如他所说，他已经知道这些工具。他感兴趣的是找出哪些规则凌驾于其他规则之上。嗯，不是所有规则。如果有两件事！重要的是，其他规则将决定哪个更具体。谢谢。我其实不知道。我将对此进行编辑和更正。：）这并没有回答问题，即如何判断哪些样式被哪个样式覆盖。嗯，看起来来自
边框的“透明”覆盖了我的颜色，并且演示的
.box蓝色
CSS低于
.box
，因此，由于颜色较低，因此具有优先权。我只是把它们按顺序抄了下来。。。希望这能少一点痛苦，哈哈，没关系