[TOC] # !important 规则 当在一个样式声明中使用一个`!important`规则时，此声明将覆盖任何其他声明。虽然技术上`!important`与优先级无关，但它与它直接相关。 <br> 使用`!important`是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的层叠规则 使得调试找bug变得更加困难了。当两条相互冲突的带有`!important`规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。 <br> # 什么的情况下可以使用 !important A) 一种情况 1. 你的网站上有一个设定了全站样式的CSS文件， 2. 同时你（或是你同事）写了一些很差的内联样式。 在这种情况下，你就可以在你全局的CSS文件中写一些`!important`的样式来覆盖掉那些直接写在元素上的行内样式。 活生生的例子比如：一些写得很糟糕的**jQuery插件**里面使用的内联样式。 <br> B) 另一种情况 ~~~html #someElement p { color: blue; } p.awesome { color: red; } ~~~ 在外层有`#someElement`的情况下，你怎样能使`awesome`的段落变成红色呢？这种情况下，如果不使用`!important`，第一条规则永远比第二条的优先级更高 <br> # 怎样覆盖 !important A) 添加一条 带`!important`的CSS规则，要么给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。 一些拥有更高优先级的例子： ~~~css table td { height: 50px !important; } .myTable td { height: 50px !important; } #myTable td { height: 50px !important; } ~~~ B) 使用相同的选择器，但是置于已有的样式之后：  ~~~css td { height: 50px !important; } ~~~ C)或干脆改写原来的规则，以避免使用 ! important 。 <br> <br> # 参考资料 MDN