CSS選擇器優先級
概念：
瀏覽器通過優先級來判斷哪一些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值。優先級是基于不同種類選擇器組成的匹配規則。
優先級是如何計算的？
由高到低分別是
- 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復雜場景時
- 行內樣式 <div style="xxx"></div> ==> a
- ID 選擇器 ==> b
- 類，屬性選擇器和偽類選擇器 ==> c
- 標簽選擇器、偽元素 ==> d
每個位置上的數字越大，選擇器的級別就越高，如果全部相等的時候，寫在后面的選擇器權重高于寫在前面的選擇器。abcd的權重依次遞減。
測試
* {} /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover {} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
在這個測試中沒有寫@import，在正常情況下，不要使用import，他會讓我們引用的CSS文件中的樣式覆蓋當前的樣式。
