初初接触样式的前端开发者在碰到样式覆盖时，最先选择的往往是!important。
但是这种做法不好，应该优先考虑从样式的级联属性或者位置来解决问题。
切记以下情况永远不要使用!important:
1. 全局样式
2.组件（插件）样式
可以使用!important:
1. 覆盖组件或者插件中的style或者important的样式
2. 自定义的一些页面用于覆盖全局样式等
如何覆盖!important:
1. 使用比原来的important样式优先级更高的选择器。
/*原来样式*/ #example {color: #f00!important} /*覆盖样式*/ div#example { color: #ff0!important} 2. 使用相同的选择器，但是位置在原来的选择器之后
css的引入方式
按照优先级由高到低：
1. 行内样式 <div style=""></div>
2.内联样式 <head><style></style></head>
3.引入外部css
CSS权重（优先级）
css优先级由css选择器种类和数量决定。
css选择器
css选择器种类按照权重从低到高有：
0. 统配选择符，*
+ > ~
权重：0
:not
div.outer p { color:orange; } div:not(.outer) p { color: blueviolet; } <div class="outer"> <p>This is in the outer div.</p> <div class="inner"> <p>This text is in the inner div.</p> </div> </div>
1. 类型选择器（元素原则器）， 如h1,div；
权重1
2. 类选择器， 如 .colorRed
权重10
3. ID 选择器， 如： #example
权重100
4. 行内样式， style
权重1000
5. !important
权重最高
css权重计算
1 * { } -> 0 2 li { } -> 1 3 li:first-line { } ->2 (一个元素，一个伪元素) 4 ul li { } -> 2 (两个元素) 5 ul ol+li { } ->3 (3个元素) 6 h1 + *[rel=up] { } -> 11 (一个元素，一个属性选择器) 7 ul ol li.red { } ->13 (三个元素，一个类) 8 li.red.level { } ->21 (一个元素，两个类) 9 style=“” ->1000 (一个行内样式) 10 p { } ->1 (一个元素) 11 div p { } -> 2 (两个元素) 12 .sith -> 10 (一个类) 13 div p.sith { } -> 12 (两个元素，一个类) 14 #sith ->100 ( 一个id) 15 body #darkside .sith p { } -> 112 (一个元素+ 一个ID + 一个类 + 一个元素 ；1+100+10+1) css权重规则
1. 不同权重，权重高的样式优先 (注意权重相同，但是选择器级别不同的情况)
<html> <head> <style type="text/css"> div{ color: blue} .red{ color: red} </style> </head> <body> <div class="red"> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> 12</div></div></div></div></div></div></div> </div> </div> </div> </div> </body> </html> 2. 相同权重，位置靠后面的优先
3. css引入方式： 行内>内敛>外部
css选择器性能（参考搬运）
css选择器如何工作？
css提升性能
1. 效率--> 搜索个数
.l{ float: left } .tc{ text-align:center; } .auto{ margin-left:auto; margin-right:auto; }