Question

当在同一页面上使用多个css文件并且它们发生碰撞时，我如何知道将使用哪一个？例如，如果一个人说蓝色身体背景而另一个人说红色。

Answer 1

快速回答：

如果两个CSS具有相同的specificity（例如，它们都是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>

以上示例将使背景颜色为蓝色，即使蓝色是第一个因为选择器为more "specific"。

例外（使用!important）：

包含!important将覆盖特异性和顺序，但在我看来，只有在您试图弄乱您无权更改它的第三方代码时才应使用任何其他方式。

外部CSS：

覆盖规则在外部CSS文件上的工作方式相同。想象一下，将它们从头到尾，从上到下。在第一个文件中调用的选择器将被任何后续文件中的相同特异性选择器覆盖。但是特异性仍然会胜过同一个文件或多个文件中的顺序。

如何测试：

在Chrome，Firefox和IE的现代版本（也可能是Safari）中，您可以右键单击某些内容并单击“检查元素”。这将显示HTML以及任何应用的CSS。当你向下滚动CSS（通常在右边）时，你会看到被划掉的东西 - 这意味着他们要么是不正确的CSS，要么被覆盖了。要进行测试，您可以修改CSS选择器（在您自己的代码中或在开发人员工具框中），以使它们更具体，并查看是否可以取消选择等等。玩那个工具 - 它非常有帮助。

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

1 个答案: