当在同一页面上使用多个 css 文件并且它们发生冲突时，我如何知道要使用哪个？例如，如果一个人说身体背景为蓝色，而另一个人说身体背景为红色。
【问题讨论】：
标签： css stylesheet
快速回答：
如果两段 CSS 具有相同的 specificity（例如，它们都是 body{），那么最后调用的那个将覆盖前一个。
但是，如果某些东西具有更高的特异性（更具体的选择器），则无论顺序如何，都会使用它。
示例 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 特异性工具：
【讨论】：
!important。 @Filip，详情见http://www.w3.org/TR/CSS2/cascade.html。