## CSS 優先級算法如何計算？ 相關知識點： ``` CSS的優先級是根據樣式聲明的特殊性值來判斷的。 選擇器的特殊性值分為四個等級，如下： （1）標簽內選擇符x,0,0,0 （2）ID選擇符0,x,0,0 （3）class選擇符/屬性選擇符/偽類選擇符 0,0,x,0 （4）元素和偽元素選擇符0,0,0,x 計算方法： （1）每個等級的初始值為0 （2）每個等級的疊加為選擇器出現的次數相加 （3）不可進位，比如0,99,99,99 （4）依次表示為：0,0,0,0 （5）每個等級計數之間沒關聯 （6）等級判斷從左向右，如果某一位數值相同，則判斷下一位數值 （7）如果兩個優先級相同，則最后出現的優先級高，!important也適用 （8）通配符選擇器的特殊性值為：0,0,0,0 （9）繼承樣式優先級最低，通配符樣式優先級高于繼承樣式 （10）!important（權重），它沒有特殊性值，但它的優先級是最高的，為了方便記憶，可以認為它的特殊性值為1,0,0,0,0。 計算實例： （1）#demo a{color: orange;}/*特殊性值：0,1,0,1*/ （2）div#demo a{color: red;}/*特殊性值：0,1,0,2*/ 注意： （1）樣式應用時，css會先查看規則的權重（!important），加了權重的優先級最高，當權重相同的時候，會比較規則的特殊性。 （2）特殊性值越大的聲明優先級越高。 （3）相同特殊性值的聲明，根據樣式引入的順序，后聲明的規則優先級高（距離元素出現最近的） (4) 部分瀏覽器由于字節溢出問題出現的進位表現不做考慮 ``` 回答： ``` 判斷優先級時，首先我們會判斷一條屬性聲明是否有權重，也就是是否在聲明后面加上了!important。一條聲明如果加上了權重， 那么它的優先級就是最高的，前提是它之后不再出現相同權重的聲明。如果權重相同，我們則需要去比較匹配規則的特殊性。 一條匹配規則一般由多個選擇器組成，一條規則的特殊性由組成它的選擇器的特殊性累加而成。選擇器的特殊性可以分為四個等級， 第一個等級是行內樣式，為1000，第二個等級是id選擇器，為0100，第三個等級是類選擇器、偽類選擇器和屬性選擇器，為0010， 第四個等級是元素選擇器和偽元素選擇器，為0001。規則中每出現一個選擇器，就將它的特殊性進行疊加，這個疊加只限于對應的等 級的疊加，不會產生進位。選擇器特殊性值的比較是從左向右排序的，也就是說以1開頭的特殊性值比所有以0開頭的特殊性值要大。 比如說特殊性值為1000的的規則優先級就要比特殊性值為0999的規則高。如果兩個規則的特殊性值相等的時候，那么就會根據它們引 入的順序，后出現的規則的優先級最高。 ``` 對于組合聲明的特殊性值計算可以參考： [《CSS 優先級計算及應用》](https://www.jianshu.com/p/1c4e639ff7d5) [《CSS 優先級計算規則》](http://www.cnblogs.com/wangmeijian/p/4207433.html) [《有趣：256 個 class 選擇器可以干掉 1 個 id 選擇器》](https://www.zhangxinxu.com/wordpress/2012/08/256-class-selector-beat-id-selector/)