使用多个矛盾的CSS文件时的优先顺序

Question

当在同一页面上使用多个CSS文件并且它们冲突时，我怎么知道要使用哪个？例如，如果一个说蓝色背景，另一个说红色。

Answer 1

快速回答：

如果这两段CSS都具有相同的特异性（例如，它们都是body{），那么无论哪个被称为LAST都会覆盖前一个。

但是，如果某些东西具有更高的特异性（一个更具体的选择器），则无论其顺序如何，都将使用它。

范例1：

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

上面的示例将颜色变为红色
。两个选择器都相同，因此也具有相同的特异性。而且由于CSS从上至下读取，我们首先将其表示为蓝色，然后再通过告诉它“没关系，将其设为红色”来覆盖它。

范例2：

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

上面的示例将使背景色变为蓝色，即使蓝色是第一个，因为选择器更“特定”。

异常（的使用!important）：

包含！important会覆盖特异性和顺序，但是我认为，仅当您尝试与第三方代码混淆时，才可以使用它，而您无权以其他任何方式对其进行更改。

外部CSS：

覆盖规则在外部CSS文件上的作用相同。试想一下，将它们放在倒数第一个，从上到下。在第一个文件中调用的选择器将在随后的任何文件中被相同特异性选择器覆盖。但是特异性仍将胜过同一文件或多个文件中的顺序。

测试方法：

在Chrome，Firefox和现代版本的IE（可能也是Safari）中，您可以右键单击某些内容，然后单击“检查元素”。这将向您显示HTML以及所有已应用的CSS。向下滚动CSS（通常在右侧）时，您会看到划掉的内容-
这意味着它们不是正确的CSS或已被覆盖。为了进行测试，您可以修改CSS选择器（在您自己的代码中或在开发人员工具框中的代码中）以使其更加具体，然后查看是否使随后的选择不被淘汰……等等。带该工具一起玩-
非常有用。