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