如何查看CSS計算每一個樣式屬性的權重

這篇文章主要介紹如何查看CSS計算每一個樣式屬性的權重，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

第一步，遍歷所有選擇器

瀏覽器在渲染某個HTML元素時，首先會尋找所有作用在該元素上的有效CSS選擇器，為此，它根據指定的媒體類型（media type）遍歷所有的樣式表來源，選擇器的來源包括：用戶代理（瀏覽器）樣式、作者樣式和用戶樣式。

常用的media type包括all/screen/print，可以通過如下的方式定義： <link href="style.css" media="screen print" ...>

瀏覽器樣式

也就是瀏覽器自身設置用來顯示網站的默認樣式，不同的瀏覽器可能有不同的樣式表，例如Chrome和IE、Firefox的就不一樣，所以大家分別使用這些瀏覽器訪問同一個網站的時候，看到實際效果可能就不盡相同。

用戶樣式

瀏覽器還允許用戶設置網頁的樣式，例如，我們用IE瀏覽網站的時候，都可以通過瀏覽器查看菜單下的樣式或者文字大小子菜單來設置網頁實際的顯示效果。

第二步，比較樣式屬性的重要性

通常情況下，作者樣式具有最高的重要性，其次是用戶樣式，最后才是瀏覽器樣式，但是如果出現了!important標記的話，那么規則會被改變，通過!important 可以提高某種樣式的重要性，讓它的優先級高于其他沒有加該聲明的所有樣式。下面是樣式屬性的重要性順序（由高至低）：

1. 標記為!important的作者樣式

2. 標記為!important的用戶樣式

3. 作者樣式

4. 用戶樣式

5. 瀏覽器（用戶代理）的默認樣式

第三步，比較樣式屬性的具體性(Specificity)

具體性可以通過一個簡化易用的1000法則來計算

內聯樣式（inline styling） 權重 1000

ID（#id） 權重 100

類（.class） 權重 10

標簽（tag） 權重 1

然后你可以把多個選擇器的權值相加，來得到最終的Specificity：

p 具體性 1 (1個標簽選擇器)

div p 具體性 2 (2個標簽選擇器, 1+1)

tree 具體性 10 (1個類選擇器)

div p.tree 具體性 12 (2個標簽選擇器 + 1個類選擇器, 1+1+10)

#baobab 具體性 100 (1個id選擇器)

body #content .alternative p 具體性 112 (標簽選擇器 + id選擇器 + class選擇器 + 標簽選擇器, 1+100+10+1)

選擇器具體性的完整計算公式要比上面復雜得多，但了解上面的法則在一般情況下已經足夠。

第四步，判斷樣式屬性出現的先后順序

這一步最簡單，出現晚的選擇器將擁有高優先級，也就是后來者居上。

對于外部引入的樣式表，@import比link擁有更高的優先級，不管它是否出現在link引入之后。

理解了上述的優先級計算規則，我們應該可以推斷出前面例子中p元素的最終顏色：

#introduction{ color: red;}

.message{ color: green;}

p{ color: blue;}

<p class="message" id="introduction">

HTML/CSS高級教程。

</p>

以上是“如何查看CSS計算每一個樣式屬性的權重”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！