前端學習系列——（八）CSS樣式優先順序
不知道你有沒有遇到這樣一種情況，語法正確、單詞正確，但是樣式就是無法應用，而是使用的不知道在哪寫過的一個樣式，然後你就偷懶使用!important讓樣式生效。哈哈哈，反正我遇到過，而且這麼做了。
其實這個問題的出現，是因為樣式存在優先順序規則。如果瞭解了樣式的優先順序，就可以避免寫出無法複用的樣式，同時可以快速定位樣式衝突無法應用的問題的根源。
一、樣式優先順序規則：
1.根據權重值排序，應用權重值第一的樣式
2.如果權重值相同，則應用最後定義的樣式（應避免這種情況，若出現問題，溯源的時候比較麻煩）
二、權重規則：
權重分為四個等級（有一個重要級角色不在此列）
第一等：內聯樣式，權重1000，即標籤內的style屬性設定的樣式
第二等：ID選擇器，權重100，例如#id{...}
第三等：類選擇器，偽類選擇器，屬性選擇器，權重10，例如.class{...}、:hover{...}、[arrtibute=value]
第四等：標籤選擇器，偽元素選擇器，權重1，例如div{...}、::after{...}
超然地位：!important（只要我出現，不好意思，權重就是無限，優先考慮，別的靠邊站）
PS:還有幾個權重為0，不計入排名，他們就是通配選擇器(*)，子選擇器(>)，相鄰同胞選擇器(+)
根據樣式根據以上規則，按照選擇器累加計算權重，例如
#my-id .my-class div p{...}
對於p標籤的來說，這個樣式的權重就是100+10+1+1=112，如果p還有別的樣式，只要小於(嚴格小於)112，就使用這個樣式，別的樣式無效。
三、舉個栗子
猜猜下面這組樣式設計 ，最後<p>標籤的文字顏色是什麼嗎？
CSS樣式如下:
.my-class div div p{ color:green; } .my-class #my-id div p{ color:red; } div #my-id div p{ color:gary; } div p{ color:blue; } p{ color:yellow; }
HTML結構如下:
<body>
<div class="my-class">
<div id="my-id">
<div>
<p>猜猜我是什麼顏色？</p>
</div>
</div>
</div>
</body>答案揭曉，是紅色！！！！為什麼呢？
因為按照上面權重規則計算權重
第一組：10+1+1+1=13
第二組：10+100+1+1=112
第三組：1+100+1+1=103
第四組：1+1=2
第五組：1
不難看出第二組權重112，最高，所以最後顯示的顏色為紅色。