CSS權值計算的方法是什么

本篇內容介紹了“CSS權值計算的方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

權重介紹

首先，什么是 CSS 權重呢？CSS 的權重，是選擇器的相對重要程度值，也可以叫權值。這個權值決定了選擇規則的優先級。通常我們對 CSS 的優先級的規則主要有下面三條：

1.CSS 權值不同時，權值高的優先；

2.CSS 權值相同時，后定義的規則優先；

3. CSS 屬性后面加  !important  時，無條件絕對優先；

只要得知權值的大小，就可以根據上面的規則進行比較。

權重計算

權重的計算方式得先得到基礎的選擇器的權重才能進行計算，基礎選擇器的權重如下：

第一等級選擇器：行間樣式（內聯樣式）

第二等級選擇器：id 選擇器

第三等級選擇器：class 選擇器，偽類選擇器，屬性選擇器

第四等級選擇器：標簽選擇器，偽元素選擇器

通用選擇器（*），子選擇器（>），相鄰同胞選擇器（+）等選擇器：權重為0。

（權重為零表示對計算結果不影響，所以可以不納入計算）

權值的計算公式為：（第一等級選擇器*個數，第二選擇器*個數，第三選擇器*個數，第四選擇器*個數）

權重比較

根據權值計算公式，得出一個四元組，通過逐一比較四元組的大小，得出權重的大小。

比如有一權重計算結果為（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.     權值相同的情況下，后者優先進行渲染（也就是樣式覆蓋）；

3.     CSS 屬性后面加 !important 時，無條件絕對優先（比內聯樣式還要優先）。

“CSS權值計算的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！