CSS學習之css層疊規則

2021-10-01 16:12:44 字數 688 閱讀 7343

這是針對多個規則中宣告衝突的情況,如果都是不同型別的宣告,那麼直接應用即可,無需比較選取

css層疊分為兩種情況:一,選中的;二,繼承的

選中的大於繼承的

# 15.1 選中的

1. 權重以及**

分為5個級別(從大到小)

1. 讀者的重要宣告(!important)

2. 創作人員的重要宣告

3. 創作人員的正常宣告

4. 讀者的正常宣告

5. 使用者**的宣告

2. 特殊性(數數)

0 0 0 0

1. 最左的為內聯樣式

2. 緊接著為id選擇器

3. 接著為class選擇器、屬性選擇器或者偽類選擇器

4. 最後為元素選擇器、偽元素選擇器

5. 通配選擇器對特殊性沒有貢獻,為0

6. 結合符沒有特殊性

7. 0比沒有特殊性強

8. !important沒有特殊性

9. 繼承沒有特殊性

3. 順序

後來者居上

# 15.2 繼承的

1. 看誰描述得近

2. 如果一樣近,比較特殊性

3. 後來者居上

css層疊規則

網頁上的元素其實是三維的,類似於高中學的左手座標系,z軸就是垂直於螢幕。層疊上下文跟 塊狀格式化上下文 bfc 類似,只要元素擁有某些特定的css屬性,就會表現出層疊上下文的特點。前提是重疊在一起,就會按照上圖的規則呈現。1 誰大誰上 如生效的z index屬性值,大的就覆蓋小的。2 後來居上 當元...

css 樣式層疊規則

檢視別人css,發現有一段css button.dark.blue button.dark 如果這樣寫,backgroud color到底是用誰的呢?原來我只知道內聯樣式的權值 id選擇器 類選擇器 標籤選擇器這樣的規則,還有就是越精細等級越高,看上面css 應該是第乙個優先順序更高吧 測試了一下,...

css層疊性規則

在css中,會根據選擇器的特殊性來決定所定義的樣式規則的次序,具有更特殊選擇器的規則優先於具有一般選擇器的規則。各種選擇器的特殊值 1 內聯樣式的特殊值 1 0 0 0 2 id選擇器的特殊值為 0 1 0 0 3 類選擇器 屬性選擇器 偽類的特殊值為 0 0 1 0 4 元素選擇器 偽元素的特殊值...