使用多个相互矛盾的 css 文件时的优先顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5902858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Order of prioritization when using multiple contradictory css files
提问by Filip Haglund
When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one says red.
当在同一页面上使用多个 css 文件并且它们发生冲突时，我怎么知道将使用哪个？例如，如果一个人说蓝色的身体背景，而另一个人说红色。
回答by Dave
Quick Answer:
快速回答：
If both pieces of CSS have the same specificity(for example, they're both body{), then whichever gets called LAST will override the previous one.
如果两个 CSS 片段具有相同的特性（例如，它们都是body{），那么调用 LAST 的那个将覆盖前一个。
BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
但是，如果某些东西具有更高的特异性（更具体的选择器），则无论顺序如何都将使用它。
Example 1:
示例 1：
<div class="container">
<div class="name">Dave</div>
</div>
<style>
.name { color: blue; }
.name { color: red; }
</style>
The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".
上面的例子将使颜色为 red。两个选择器是相同的，因此也具有相同的特异性。因为 CSS 从上到下读取，我们首先告诉它是蓝色的，然后我们通过告诉它“没关系，让它变成红色”来覆盖它。
Example 2:
示例 2：
<div class="container">
<div class="name">Dave</div>
</div>
<style>
#container .name { background-color: blue; }
.name { background-color: red; }
</style>
The above example will make the background color blue, even though blue was first because the selector is more "specific".
上面的示例将使背景颜色为 blue，即使首先使用 blue 也是因为选择器更“具体”。
Exception (the use of !important):
异常（使用!important）：
The inclusion of !importantwill override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.
包含!important将覆盖特殊性和顺序，但在我看来，只有当您试图弄乱第三方代码而您无法以任何其他方式对其进行更改时，才应使用。
External CSS:
外部 CSS：
Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.
覆盖规则对外部 CSS 文件的作用相同。想象一下，把它们从头到尾，从上到下。在第一个文件中调用的选择器将被任何后续文件中的相同特异性选择器覆盖。但在同一文件或多个文件中，特异性仍然胜过顺序。
How to test:
如何测试：
In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.
在 Chrome、Firefox 和现代版本的 IE（也可能是 Safari）中，您可以右键单击某些内容并单击“检查元素”。这将向您显示 HTML 以及任何应用的 CSS。当您向下滚动 CSS（通常在右侧）时，您会看到被划掉的内容 - 这意味着它们要么是不正确的 CSS，要么已被覆盖。要进行测试，您可以修改 CSS 选择器（在您自己的代码中或直接在开发人员工具框中）以使其更具体，然后查看是否可以取消划掉......等。使用该工具进行操作 - 它非常有帮助。
