很多小伙伴在學完 CSS 之后對于選擇器的選擇還是比較隨意，導致有時候可能出現(xiàn) CSS 沖突。其實出現(xiàn) CSS 沖突的根本原因，是開發(fā)者對 CSS 選擇器的權重理解不到位所致。接下來的這篇文章，小編就來介紹如何進行 CSS 權重計算。
權重介紹
首先，什么是 CSS 權重呢？CSS 的權重，是選擇器的相對重要程度值，也可以叫權值。這個權值決定了選擇規(guī)則的優(yōu)先級。通常我們對 CSS 的優(yōu)先級的規(guī)則主要有下面三條：
1.CSS 權值不同時，權值高的優(yōu)先；
2.CSS 權值相同時，后定義的規(guī)則優(yōu)先；
3. CSS 屬性后面加 ? !important? 時，無條件絕對優(yōu)先；
只要得知權值的大小，就可以根據(jù)上面的規(guī)則進行比較。
權重計算
權重的計算方式得先得到基礎的選擇器的權重才能進行計算，基礎選擇器的權重如下：
第一等級選擇器：行間樣式（內(nèi)聯(lián)樣式）
第二等級選擇器：id 選擇器
第三等級選擇器：class 選擇器，偽類選擇器，屬性選擇器
第四等級選擇器：標簽選擇器，偽元素選擇器
通用選擇器（*），子選擇器（>），相鄰同胞選擇器（+）等選擇器：權重為0。
（權重為零表示對計算結果不影響，所以可以不納入計算）
權值的計算公式為：（第一等級選擇器*個數(shù)，第二選擇器*個數(shù)，第三選擇器*個數(shù)，第四選擇器*個數(shù)）
權重比較
根據(jù)權值計算公式，得出一個四元組，通過逐一比較四元組的大小，得出權重的大小。
比如有一權重計算結果為（1,0,2,4）,另一權重計算結果為（1,0,2,3），則應用第一種權重所屬的選擇器。
案例
<ul id="nav" class="nav">
<li class="active" id="first"><a href=""></a></li>
</ul>如上所示HTML代碼，選中a的方式有如下幾種：
?ul#nav li.active a? 權值為（0,1,1,3）；
?ul li.active a? 權值為（0,0,1,2）；
?ul.nav li.active a? 的權值為（0,0,2,2）；
?ul#nav li#first a? 的權值為（0,2,0,2）；
如果樣式在行間（也就是行間樣式），權值為（1,0,0,0） ；
如果某項 CSS 屬性后面帶 ?!important? 時，權值最大。
總結
1. 進行權重比較的時候，按順序從左往右進行比較；
2. 權值相同的情況下，后者優(yōu)先進行渲染（也就是樣式覆蓋）；
3.
CSS 屬性后面加 ?!important? 時，無條件絕對優(yōu)先（比內(nèi)聯(lián)樣式還要優(yōu)先）；
小結
以上就是 CSS 權重計算的方法。該方法雖然在工作中比較少遇到，但一旦遇到了 CSS 沖突，該方法就有了用武之地。而且如果作為求職者的話，前端面試的 HR 有時候會問到權重計算的問題，所以各位想要往前端方向發(fā)展的小伙伴們還是要掌握這項技能。
更多前端高階知識點，可以前往 W3Cschool 的前端微課進行學習。
