CSS高階知識(shí)點(diǎn)-CSS權(quán)值計(jì)算方法

很多小伙伴在學(xué)完 CSS 之后對(duì)于選擇器的選擇還是比較隨意，導(dǎo)致有時(shí)候可能出現(xiàn) CSS 沖突。其實(shí)出現(xiàn) CSS 沖突的根本原因，是開(kāi)發(fā)者對(duì) CSS 選擇器的權(quán)重理解不到位所致。接下來(lái)的這篇文章，小編就來(lái)介紹如何進(jìn)行 CSS 權(quán)重計(jì)算。

權(quán)重介紹

首先，什么是 CSS 權(quán)重呢？CSS 的權(quán)重，是選擇器的相對(duì)重要程度值，也可以叫權(quán)值。這個(gè)權(quán)值決定了選擇規(guī)則的優(yōu)先級(jí)。通常我們對(duì) CSS 的優(yōu)先級(jí)的規(guī)則主要有下面三條：

1.CSS 權(quán)值不同時(shí)，權(quán)值高的優(yōu)先；

2.CSS 權(quán)值相同時(shí)，后定義的規(guī)則優(yōu)先；

3. CSS 屬性后面加 ? !important?  時(shí)，無(wú)條件絕對(duì)優(yōu)先；

只要得知權(quán)值的大小，就可以根據(jù)上面的規(guī)則進(jìn)行比較。

權(quán)重計(jì)算

權(quán)重的計(jì)算方式得先得到基礎(chǔ)的選擇器的權(quán)重才能進(jìn)行計(jì)算，基礎(chǔ)選擇器的權(quán)重如下：

第一等級(jí)選擇器：行間樣式（內(nèi)聯(lián)樣式）

第二等級(jí)選擇器：id 選擇器

第三等級(jí)選擇器：class 選擇器，偽類(lèi)選擇器，屬性選擇器

第四等級(jí)選擇器：標(biāo)簽選擇器，偽元素選擇器

通用選擇器（*），子選擇器（>），相鄰?fù)x擇器（+）等選擇器：權(quán)重為0。

（權(quán)重為零表示對(duì)計(jì)算結(jié)果不影響，所以可以不納入計(jì)算）

權(quán)值的計(jì)算公式為：（第一等級(jí)選擇器*個(gè)數(shù)，第二選擇器*個(gè)數(shù)，第三選擇器*個(gè)數(shù)，第四選擇器*個(gè)數(shù)）

權(quán)重比較

根據(jù)權(quán)值計(jì)算公式，得出一個(gè)四元組，通過(guò)逐一比較四元組的大小，得出權(quán)重的大小。

比如有一權(quán)重計(jì)算結(jié)果為（1,0,2,4）,另一權(quán)重計(jì)算結(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） ；

如果某項(xiàng) CSS 屬性后面帶 ?!important? 時(shí)，權(quán)值最大。

總結(jié)

1.     進(jìn)行權(quán)重比較的時(shí)候，按順序從左往右進(jìn)行比較；

2.     權(quán)值相同的情況下，后者優(yōu)先進(jìn)行渲染（也就是樣式覆蓋）；

3.     CSS 屬性后面加 ?!important? 時(shí)，無(wú)條件絕對(duì)優(yōu)先（比內(nèi)聯(lián)樣式還要優(yōu)先）；

小結(jié)

以上就是 CSS 權(quán)重計(jì)算的方法。該方法雖然在工作中比較少遇到，但一旦遇到了 CSS 沖突，該方法就有了用武之地。而且如果作為求職者的話(huà)，前端面試的 HR 有時(shí)候會(huì)問(wèn)到權(quán)重計(jì)算的問(wèn)題，所以各位想要往前端方向發(fā)展的小伙伴們還是要掌握這項(xiàng)技能。

更多前端高階知識(shí)點(diǎn)，可以前往 W3Cschool 的前端微課進(jìn)行學(xué)習(xí)。