使用多个矛盾的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)中,您可以右键单击某些内容并单击"Inspect Element".这将显示HTML以及任何应用的CSS.当你向下滚动CSS(通常在右边)时,你会看到被划掉的东西 - 这意味着他们要么是不正确的CSS,要么被覆盖了.要进行测试,您可以修改CSS选择器(在您自己的代码中或在开发人员工具框中),以使它们更具体,并查看是否可以取消选择等等.玩那个工具 - 这非常有帮助.