CSS 選擇器權重優先順序計算規則
阿新 • • 發佈：2018-12-25
CSS有兩大特性，繼承性和層疊性
層疊性指的是：權重相同的情況下，後寫的覆蓋前面的樣式。
由此可見，層疊性和選擇器的權重有很大關係，今天就著重說一下選擇器的權重
選擇器有兩大類：
基礎選擇器：id選擇器，類選擇器，標籤選擇器，萬用字元選擇器；
複合選擇器：後代選擇器，並集選擇器，指定標籤（交集）選擇器；
權重：
基礎選擇器權重：id選擇器 > 類選擇器> 標籤選擇器> 萬用字元選擇器；
複合選擇器權重就需要計算了，這裡講兩種計算方法
一、加法運算
如圖所示：
1.內聯樣式，如: style=””，權值為1000。
2.ID選擇器，如：#content，權值為100。
3.類，偽類和屬性選擇器，如.content，權值為10。
4.標籤選擇器和偽元素選擇器，如div p，權值為1。
複合選擇器的權重計算：
將基本選擇器的權重相加之和，就是權重大小，值越大，權重越高
比如：
#box ul li a.cur {color:red;}
#box li .cur {color:green;}
#box ul li a.cur 權重是 100+1+1+1+10 = 113
#box li .cur 權重是 100+1+10 = 111
那麼後面的樣式就會被前面的樣式層疊掉,那麼最終a的顏色是red
這是第一種加法運算
二、4個0計算方式
（0,0,0,0）分別對應（行內式個數,id選擇器個數,類選擇器個數,標籤選擇器個數）
兩個選擇器通過對比4個數的大小，確定權重關係
怎麼理解呢？
例如：#box ul li a.cur 有1個id，3個標籤，1個類 那麼 4個0 就是 (0,1,1,3)
例如：.nav ul .active .cur 有0個id，1個標籤，3個類 那麼 4個0 就是 (0,0,3,1)
怎麼比較大小呢：
先比較第一個數，兩個都是0，所以對比第二個數，因為第一個選擇器第二個數是1，而後一個選擇器權重是0所以前面的選擇器權重大。
圖解：
注意：
1.無論哪種計算方式，10個標籤選擇器權重等於1個類選擇器，10個類選擇器 權重等於1個id選擇器這種想法都是不對的。聽說255個可以，我沒試過，有興趣可以自己
試試自己可以試試。
2.！important 權重永遠最高
3.繼承獲取的樣式權重永遠最低
