你活了多少歲不算什麼,重要的是你是如何度過這些歲月的。——亞伯拉罕·林肯瀏覽器
在正式介紹CSS 屬性值計算
前先來看個經典的問題:性能
:link
、:visited
、:hover
、:active
僞類書寫順序致使,最終顯示效果不一致的問題若是上訴問題還不是很明白的,請繼續往下看學習
首先咱們得知道,僅當元素的 CSS 屬性都不爲空,瀏覽器纔會渲染該元素,那麼元素的 CSS 屬性值從無到有的過程就叫做
CSS 屬性值的計算過程
code
我想不少人會疑惑,我明明只給元素設置了一兩個 CSS 屬性,怎麼就全部的 CSS 屬性都有值了,其實當元素的 CSS 屬性值爲空,瀏覽器就會使用 CSS 屬性值計算規則,給該屬性賦值cdn
CSS 屬性值默認全爲空,將開發者寫的無衝突 CSS 樣式做爲初值賦值給對應的 CSS 屬性,當遇到衝突時,使用層疊解決blog
聲明衝突:多個 CSS 樣式,做用於同一元素繼承
層疊:瀏覽器解決聲明衝突的過程,瀏覽器自定處理圖片
做者樣式表:開發者寫的 CSS 代碼開發
層疊規則:it
比較重要性
重要性從高到底
1)做者樣式表中的!improtant
關鍵字
2)做者樣式表中普通樣式
3)瀏覽器默認樣式表
比較特殊性
目標是做者樣式表中普通樣式
特殊性看選擇器,選擇器選中範圍越窄
,特殊性越強
具體規則:根據選擇器,計算一個 4 位數的權重
1)千位:若是是內聯樣式,千位爲 1,不然爲 0
2)百位:等於選擇器中全部 id 選擇器
的數量
3)十位:等於選擇器中全部類選擇器
、屬性選擇器
、僞類選擇器
的數量
4)個位:等於選擇器中全部元素選擇器
、僞元素選擇器
的數量
比較源次序
比較代碼的書寫位置,後面的覆蓋前面的
當通過了1、二兩步後,仍有CSS 屬性爲空,則查看該屬性可否繼承,能就使用繼承的值,不能則執行下一步
大多數與文字相關的 CSS 屬性都能繼承
若是通過了以上三步,屬性依然爲空,則使用瀏覽器對該屬性的默認值
當學習 CSS 屬性值的計算過程過,咱們再來看看最開始的題
一. a 標籤的:link
、:visited
、:hover
、:active
僞類書寫順序
:link
、:visited
、:hover
、:active
賦值做者樣式表中的樣式
,那麼咱們就直接從比較特殊性開始,若是不能解決衝突,再比較源次序比較特殊性 (計算權重)
a:link:1 + 10 = 11 a:hover: 1 + 10 = 11 相同沒法解決衝突
比較源次序 這裏就看你代碼的書寫順序了,遵照後面覆蓋前面的原則 好比 hover 寫前面,那麼就使用 link 的樣式 反之則使用 hover 的樣式