小和尚學習 - CSS屬性值的計算過程

你活了多少歲不算什麼，重要的是你是如何度過這些歲月的。——亞伯拉罕·林肯

在正式介紹CSS 屬性值計算前先來看個經典的問題：

• a 標籤的:link、:visited、:hover、:active僞類書寫順序致使，最終顯示效果不一致的問題

若是上訴問題還不是很明白的，請繼續往下看

首先咱們得知道，僅當元素的 CSS 屬性都不爲空，瀏覽器纔會渲染該元素，那麼元素的 CSS 屬性值從無到有的過程就叫做CSS 屬性值的計算過程

我想不少人會疑惑，我明明只給元素設置了一兩個 CSS 屬性，怎麼就全部的 CSS 屬性都有值了，其實當元素的 CSS 屬性值爲空，瀏覽器就會使用 CSS 屬性值計算規則，給該屬性賦值

CSS 屬性值計算過程

一. 肯定聲明值

CSS 屬性值默認全爲空，將開發者寫的無衝突 CSS 樣式做爲初值賦值給對應的 CSS 屬性，當遇到衝突時，使用層疊解決

二. 層疊（權重值計算）

聲明衝突：多個 CSS 樣式，做用於同一元素

層疊：瀏覽器解決聲明衝突的過程，瀏覽器自定處理

做者樣式表：開發者寫的 CSS 代碼

層疊規則：

1. 比較重要性

   重要性從高到底

   1）做者樣式表中的!improtant關鍵字
   2）做者樣式表中普通樣式
   3）瀏覽器默認樣式表

2. 比較特殊性

   目標是做者樣式表中普通樣式

   特殊性看選擇器，選擇器選中範圍越窄，特殊性越強

   具體規則：根據選擇器，計算一個 4 位數的權重

   1）千位：若是是內聯樣式，千位爲 1，不然爲 0
   2）百位：等於選擇器中全部 id 選擇器的數量
   3）十位：等於選擇器中全部類選擇器、屬性選擇器、僞類選擇器的數量
   4）個位：等於選擇器中全部元素選擇器、僞元素選擇器的數量

3. 比較源次序

   比較代碼的書寫位置，後面的覆蓋前面的

三. 屬性繼承

當通過了1、二兩步後，仍有CSS 屬性爲空，則查看該屬性可否繼承，能就使用繼承的值，不能則執行下一步

大多數與文字相關的 CSS 屬性都能繼承

四. 使用默認值

若是通過了以上三步，屬性依然爲空，則使用瀏覽器對該屬性的默認值

---

當學習 CSS 屬性值的計算過程過，咱們再來看看最開始的題

一. a 標籤的:link、:visited、:hover、:active僞類書寫順序

1. 肯定聲明值：給:link、:visited、:hover、:active賦值
2. 層疊：在鼠標移動到 a 元素上時，同時觸發了 link，hover 僞類狀態，那麼這時就產生了聲明衝突，因爲這兩個都屬於做者樣式表中的樣式，那麼咱們就直接從比較特殊性開始，若是不能解決衝突，再比較源次序

• 比較特殊性 （計算權重）
  a:link：1 + 10 = 11 a:hover: 1 + 10 = 11 相同沒法解決衝突

• 比較源次序 這裏就看你代碼的書寫順序了，遵照後面覆蓋前面的原則 好比 hover 寫前面，那麼就使用 link 的樣式 反之則使用 hover 的樣式