!important 例外规则
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important
与其使用 !important，你可以：
更好地利用 CSS 级联属性
使用更具体的规则。在你选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
html
Text
cssdiv#test span {
color: green;
}
div span {
color: blue;
}
span {
color: red;
}
无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）
对于（2）的一种特殊情况，当你无其他要指定的内容时，请复制简单的选择器以增加特异性。
css#myId#myId span {
color: yellow;
}
.myClass.myClass span {
color: orange;
}
什么的情况下可以使用 !important：
A) 覆盖内联样式
你的网站上有一个设定了全站样式的 CSS 文件，同时你（或是你同事）写了一些很差的内联样式。
全局的 CSS 文件会在全局范围内设置网站的外观，而直接在各个元素上定义的内联样式可能会覆盖你的全局 CSS 文件。内联样式和 !important 都被认为是非常不好的做法，但是有时你可以在 CSS 文件里用 !important 去覆盖内联样式。
在这种情况下，你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。
html
css.foo[style*="color: red"] {
color: firebrick !important;
}
许多 JavaScript 框架和库都添加了内联样式。有时候可以用!important与优先级高的选择器一起使用，以重写覆盖这些内联样式。
B) 覆盖优先级高的选择器
css#someElement p {
color: blue;
}
p.awesome {
color: red;
}
在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important，第一条规则永远比第二条的优先级更高
怎样覆盖 !important
A) 很简单，只需再添加一条 带 !important 的 CSS 规则，再给这个给选择器更高的优先级（添加一个标签，ID 或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则必胜）。
一些拥有更高优先级的例子：
csstable td {
height: 50px !important;
}
.myTable td {
height: 50px !important;
}
#myTable td {
height: 50px !important;
}
B) 或者使用相同的选择器，但是置于已有的样式之后：
csstd {
height: 50px !important;
}
C) 或干脆改写原来的规则，以避免使用 !important。
css[id="someElement"] p {
color: blue;
}
p.awesome {
color: red;
}
将 id 作为属性选择器的一部分而不是 id 选择器，将使其具有与类相同的特异性。上面的两个选择器现在具有相同的权重。在优先级相同情况下，后面定义的 CSS 样式会被应用。
若想了解更多信息，请参考：
https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
https://stackoverflow.com/questions/11178673/how-to-override-important
https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css