css 權重及！important
在編寫css樣式的時候，我們會時常碰到自己寫的樣式沒有生效，尤其是引用一些外部框架的時候，這種情況更容易發生。
CSS樣式的優先順序
按照官方的表述，css優先順序如下：
通用選擇器（*） < 元素(型別)選擇器 < 類選擇器 < 屬性選擇器 < 偽類 < ID 選擇器 <內聯樣式
舉例：
例如以下程式碼：
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta style.css
@charset "utf-8";
/*
//author:hjb2722404
//description:
//date:2015/10/10
*/
* { width:1000 此時，我們檢視效果，
發現最終起作用的是內聯樣式，並且滑鼠懸浮到圖片上時：hover的樣式並未起作用。說明內聯樣式優先順序最高。
我們去掉行內樣式：
<img src="img.jpg" width="1080" class="img" id="img" alt="圖片"/>再看效果：
發現最終應用了ID選擇器的規則，並且：hover偽類未起作用，我們繼續去掉ID選擇器，看效果：
* { width: 1000px;}
.img { width: 180px;}
img[alt="img"] {
width: 400px;
}
img:hover { width: 500px;}
/*#img { width: 300px;}*/
發現此時應用了”屬性選擇器“的規則，當滑鼠懸停到圖片上時：
應用了”偽類“的規則，說明偽類的優先順序高於”屬性選擇器“。
我們繼續去掉屬性選擇器與偽類：
* { width: 1000px;}
.img { width: 180px;}
/*img[alt="img"] {*/
/*width: 400px;*/
/*}*/
/*img:hover { width: 500px;}*/
/*#img { width: 300px;}*/效果如下：
這裡應用了”類選擇器“的規則。
我們繼續去掉類選擇器：
* { width: 1000px;}
/*.img { width: 180px;}*/
/*img[alt="img"] {*/
/*width: 400px;*/
/*}*/
/*img:hover { width: 500px;}*/
/*#img { width: 300px;}*/效果如下：
發現應用了”元素選擇器“規則。
繼續去掉元素選擇器：
<link rel="stylesheet" href="style.css"/>
<!--<style>-->
<!--img { width: 150px;}-->
<!--</style>-->效果如下：
我們發現它應用了”通用選擇器“的規則。繼續去掉通用選擇器：
/** { width: 1000px;}*/效果如下：
發現應用了元素自身的屬性值。
再去掉元素自身屬性之後，不必說，顯示的就是原圖大小了
至此，我們一步步驗證了CSS官方的優先順序順序規則，除了最後一點，提醒我們注意：
元素自身屬性的優先順序反而是最低的
這一實驗駁斥了一些部落格上所說的”離元素越近優先順序越高“的說法
css樣式優先順序計算規則：
實際上，優先順序之所以表現為上面所示，是因為CSS內部是按每條樣式的權重值來計算優先順序的，各型別選擇器所對應的權重值如下：
元素, 偽元素: 1 – (0,0,0,1)
類, 偽類, 屬性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
內聯樣式: 1 – (1,0,0,0)
我們可以這樣理解：
假使元素在未應用任何樣式前它的權重值為0，那麼，每條樣式的權重值就是該樣式所包含的所有選擇器相對應的權重值之和：
元素，偽元素：+1
類，偽類，屬性：+10
ID：+100
內聯樣式：+1000
例如以下樣式：
p {} //p為元素，總權重就是：1
div p{} //p與div都是元素，總權重是：1=1=2
.div p // .div是類，p是元素，總權重是：10+1=11所以，如果這三條樣式修飾同一p元素，最終應用的就是第三條權重值最大的樣式。
總有例外
那麼，如果同時有幾個選擇器規則應用在同一個元素上，我想最終要的那條權重又比其他的比較低，怎麼辦呢？
還拿一開始那個例子來說，我現在就想讓圖片寬度為150px，即應用元素選擇器中的樣式，在不註釋和刪除其他樣式的情況下，我該怎麼做，答案就是：
！important
!important允許開發人員強制應用某樣式，他的用法是寫在該樣式的某屬性值後，結束分號前，以便強制應用該樣式，如：
<style>
img { width: 150px !important;}
</style>我們看看效果：
成功了！
注意：在開發中不到萬不得已，儘量不要使用此方法，建議通過改變選擇器型別來改變權重。至於為啥，自行問度娘吧^.^