css的優先順序之前一直沒怎麼註意沒當回事，總以為對同一元素靠後的渲染會覆蓋前面的渲染，要是覆蓋不了那就來個!important嘛。直到我那在學前端基礎的後端伙伴拿一個問題問住了我，我才意識到這是重點中的重點啊！啪啪啪打臉！ 優先順序關係 先來看css為元素添加樣式的幾種規則（優先順序a>b>c>d，!i ...
css的優先順序之前一直沒怎麼註意沒當回事，總以為對同一元素靠後的渲染會覆蓋前面的渲染，要是覆蓋不了那就來個!important嘛。直到我那在學前端基礎的後端伙伴拿一個問題問住了我，我才意識到這是重點中的重點啊！啪啪啪打臉！
優先順序關係
先來看css為元素添加樣式的幾種規則（優先順序a>b>c>d，!important無敵）
|
標記 |
a |
b |
c |
d |
|
規則 |
使用行內樣式style |
使用id選擇器 |
使用類、屬性、偽類選擇器 |
使用元素、偽元素選擇器 |
|
例子 |
style="" |
#id |
class 、 [type="submit'] 、 :hover |
p、::after |
權重計算
用a,b,c,d分別表示相關規則出現的次數
| 選擇符 | 權重(a,b,c,d) | 權值 |
| style="" | (1,0,0,0) | 1000 |
| #wrapper #content | (0,2,0,0) | 200 |
| #content .datePosted | (0,1,1,0) | 110 |
| div #content{} | (0,1,0,1) | 101 |
| #content | (0,1,0,0) | 101 |
| p.comment .datePosted{} | (0,0,2,1) | 21 |
| p.comment{} | (0,0,1,1) | 11 |
| div p{} | (0,0,0,2) | 2 |
| p | (0,0,0,1) | 1 |
| .container .row .col-left | (0,0,3,0) | 30 |
| .col-left | (0,0,1,0) | 10 |
補充
1.雖然提高選擇器的權重值能有效解決靠後的渲染失敗問題，但也僅僅是個解決方法，渲染不衝突的情況下，不要寫那麼多累贅
2.!important雖無敵和style雖一人之下，但都應儘量避免使用
3.在學習過程中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值為 100，類選擇器權值為 10，標簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權值相加，然後再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 > 100，應該應用前者的樣式，然而事實是應用後者的樣式。錯誤的原因是：權重的進位是並不是十進位，CSS 權重進位在 IE6 為 256，後來擴大到了 65536，現代瀏覽器則採用更大的數量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100， 你可以理解為 99.99，所以最終應用後者樣式。
