解决方法
如果两个CSS都具有相同的
specificity(例如，它们都是“body {”)，那么任何被称为LAST将覆盖以前的。
但是 – 如果有更高的特异性(更具体的选择器)，它将被使用，而不管顺序。例如：
<div id="myDiv"></div>
/* CSS: */
#myDiv { background-color: blue; }
div { background-color: red; }
上述示例将使背景颜色为蓝色，即使蓝色是第一个，因为id选择器(#)比一般div元素选择器更“特定”。
包括!important将覆盖特异性和顺序，但在我看来，应该只用于如果你试图混乱第三方代码，你没有访问权限，以任何其他方式改变。
外部CSS：
覆盖规则在外部CSS文件上工作相同。想象一下，把它们从头到尾，从上到下。在第一个文件中调用的选择器将被任何后续文件中的相同特异性选择器覆盖。但特异性仍然会在同一文件或多个文件中的顺序。
如何测试：
在Chrome，Firefox和现代版本的IE(可能是Safari)中，您可以右键单击某些内容，然后单击“检查元素”。这将显示HTML以及任何应用的CSS。当你向下滚动CSS(通常在右边)，你会看到被删除的东西 – 这意味着他们是不正确的CSS或已被覆盖。要测试，您可以修改CSS选择器(在您自己的代码或在开发人员工具箱中)，使它们更具体，看看是否使得然后未交叉…等。玩这个工具 – 这是非常有帮助。
