CSS屬性值的計算過程

2021-10-19 07:33:22 字數 1122 閱讀 3934

確定宣告值(包括作者樣式表,就是自己寫的,還有瀏覽器預設樣式表)

這一步會參考樣式表中沒有衝突的宣告作為css屬性值

層疊衝突

第一步有衝突的宣告,會使用層疊規則確定css屬性值

比較重要性

重要性從高到低:

作者樣式表(我們自己寫的)中的! importment(不推薦使用)>作者樣式表中的普通樣式(不加! importment)>瀏覽器中的預設樣式

比較特殊性(比較權重).

id選擇器:100

類選擇器或偽類選擇器:10

元素選擇器或屬性選擇器或偽元素選擇器:1

萬用字元選擇器*:0

比較源次序

當權重一樣時,後面寫的會把前面的覆蓋掉

繼承對還沒有值的屬性,若該屬性可以被繼承,則繼承父元素的

使用預設值

對還沒有值的屬性會使用預設值,如background-color這個屬性就不可以被繼承,如果前三部都沒有確定background-color的屬性值就會使用預設值,他的預設值是透明色

例子

.demo

class

="demo"

>

href="

">

demoa

>

div>

那麼demo的顏色是什麼?

分析過程

確定宣告值

我們自己沒有對元素設定color屬性,a元素有瀏覽器預設樣式表color: -webkit-link,那麼根據規則a元素的color屬性值就會為webkit-link

那麼第二步層疊衝突,第三部繼承,還有第四步就不會執行了,因為第一步a元素的color屬性就有值了,就不會繼承父元素div的屬性值了

如果想要a元素繼承父元素的顏色值的話,可以設定

>

astyle

>

分析:此時第一步確定宣告值就會產生衝突,進入第二步層疊衝突,那麼根據規則color的屬性值就會是繼承父元素的值,根據渲染順序,此時父元素已經渲染出來,就會從父元素中直接獲取color的值,此時是強制繼承,第三步的繼承就不會發生了

CSS屬性值的計算過程

瀏覽器渲染網頁 乙個元素乙個元素依次渲染,順序按照頁面文件的樹形目錄結構進行渲染的 渲染每個元素的前提條件,該元素的所有css屬性必須有值 乙個元素,從所有屬性都沒有值,到所有的屬性都有屬性值,這個計算過程,叫做屬性計算過程 html元素 到有值從沒有值到到有值的過程 確定宣告值 參考樣式表中沒有衝...

屬性值的計算過程

乙個乙個元素,依次渲染,按照頁面文件的樹形目錄結構進行 渲染每乙個元素的前提條件 該元素的所有css屬性必須都有值 屬性值的計算過程 乙個元素,從所有屬性沒有值到所有屬性都有值的過程 1.確定宣告值 參考樣式表 作者樣式表,或者瀏覽器樣式表 中沒有衝突的宣告,作為css屬性值 2.層疊衝突 對樣式表...

前端小筆記 屬性值的計算過程

瀏覽器渲染網頁 乙個個元素依次渲染,且按照頁面文件的樹形結構順序進行渲染。前提條件要求該元素的所有css屬性都必須有值。而乙個元素從沒有屬性值到每個屬性都有值的計算過程叫做 屬性值的計算過程 此過程一共有以下四個步驟 確定宣告值 參考樣式表中沒有衝突的宣告,作為css屬性值 層疊衝突 對樣式表有衝突...