很久沒用bootstrap，對與按自己的需求修改樣式都忘了。
一上來就新增了新的class類，重寫css樣式讓其覆蓋原有的樣式，實際上不起作用。因為沒考慮的選擇器的優先順序。面試的時候會問到一些這個問題，一直不能從理論和實踐聯絡起來。
我的解決方案是通過子選擇器來增加權重，看別人也有用id的，我不太喜歡新增id的選擇器。
回憶一波選擇器以及其優先順序。
一、css選擇器
1.標籤選擇器(如：body,div,p,ul,li)
2.類選擇器(如：class)
3.ID選擇器(如：id)
4.全域性選擇器(如：*號)
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)
6.後代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)
7.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標籤分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)
9.偽類選擇器(如：就是連結樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。)
10.字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
11.子選擇器 (如：div>p ,帶大於號>)
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)
二、優先順序
- 當在一個樣式宣告上使用 !important 規則時，該樣式宣告會覆蓋CSS中任何其他的宣告。ie6不支援該屬性
- 內聯樣式表的權值最高 1000；即在html中給元素標籤加style，即內聯樣式。該方法會造成css難以管理，所以不推薦使用。
- ID 選擇器的權值為 100；由一個或多個id選擇器來定義。例如，#id{margin:0;}id選擇器會覆蓋類選擇器.classname{margin:3pxl}
- Class 類選擇器的權值為 10；由一個或多個類選擇器、屬性選擇器、偽類選擇器定義。如.classname{margin:3px}會覆蓋div{margin:6px;}
- 標籤選擇器權值為 1：由一個或多個型別選擇器定義。如div{marigin:6px;}覆蓋*{margin:10px;}
- 萬用字元選擇器：如*{marigin:6px;}
- 瀏覽器自定義或繼承權值為0.1
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
三、！important
使用 !important 是一個壞習慣，應該儘量避免，因為這打斷了樣式表中的固有的級聯規則 使得除錯找bug變得更加困難了。當兩條相互衝突的帶有!important 規則的宣告被應用到相同的元素上時，擁有更大優先順序的宣告將會被採用。
查詢的經驗：
永遠不要在全站範圍的 css 上使用 !important
只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
永遠不要在你的外掛中使用 !important
要優化考慮使用樣式規則的優先順序來解決問題而不是 !important