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

在這裏插入圖片描述

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

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

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

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

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

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

CSS 屬性值計算過程

一. 肯定聲明值

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

二. 層疊(權重值計算)

聲明衝突:多個 CSS 樣式,做用於同一元素繼承

層疊:瀏覽器解決聲明衝突的過程,瀏覽器自定處理圖片

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

層疊規則it

  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 的樣式

相關文章
相關標籤/搜索