App下載

CSS高階知識點-CSS權值計算方法

猿友 2021-06-07 16:01:39 瀏覽數(shù) (5817)
反饋

很多小伙伴在學完 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 的前端微課進行學習。


0 人點贊