css中各種層疊樣式實例匯總

CSS（層疊樣式表）用來規定HTML文件的呈現形式。凡事都有先後順序，凡物都有論資排輩。一般情況下，看不出什麼差異，即所謂的眾生平等。但是，當發生衝突發生糾葛的時候，顯然，是不可能做到完全等同的，先後順序，身份差異就顯現出來了。層疊是瀏覽器對多個樣式來源進行疊加，最終決定結果的過程。本篇文章就是要聊聊css層疊樣式的具體作用。

首先可以學習php中文網相關的免費課程

#1. 學習《彈指間學會HTML+CSS》中的 CSS層疊 教學

css層疊樣式

#1. CSS樣式繼承與層疊

特點：

標籤選擇器會對當年頁面中所有的指定標籤進行選擇；

##標籤選擇器對程式碼的目前標籤層次結構沒有任何關聯，只要是在目前頁面上，都能被選取。

id選擇：需要先指定一個標籤設定id值（id值不能重複是整個頁面中唯一的）。  

class選擇：透過給標籤取類別名，透過類別選擇器選擇指定標籤。

2. 

詳解CSS層疊機制

#層疊樣式表中的層疊意味著樣式會從文件結構中的一個層次傳遞到另一個層次，其作用是讓瀏覽器決定在諸多來源中，為某個標籤套用來自哪個來源的樣式屬性。

層疊是一種強大的機制。理解層疊有助於以最經濟和最容易維護的方式來編寫CSS，也有助於根據你的意願創建出最理想的文件外觀。

3. 

詳解CSS繼承特性與層疊特性

第一個P沒有使用選擇器，所以採用HTML預設的顯示顏色（黑色）

第二個P使用了類別選擇器，所以優先採用類別選擇器的顏色（紅色）

第三個P使用了ID和類別兩個選擇器，由於ID選擇器的優先級高於類別選擇器，所以顏色顯示為藍色

第四個P使用了行內選擇器和ID選擇器，由於行內選擇器優先權高於ID選擇器，所以顏色顯示為黃色

第五個P同時使用了兩個類別選擇器，瀏覽器在解釋網頁時以第一個類別選擇器定義的顏色為準，所以顏色顯示為紫色第六個P同時使用了兩個ID選擇器，但由於ID選擇器只能同時用於一個標記且全域唯一，所以瀏覽器認為這是一個非法的，顏色以其預設值顯示（黑色）

4. 
詳細說明CSS層疊樣式表

[attribute]選擇具有attribute屬性的元素。

[attribute=value]選擇具有attribute屬性且屬性值等於value的元素。

[attribute~=value]選擇具有attribute屬性且屬性值為一用空格分隔的字詞列表，其中一個等於value的元素。 ######[attribute|=value]選擇具有att屬性且屬性值為以val開頭並以連接符號"-"分隔的字串的E元素。 ######[attibute^=value]符合具有attribute屬性、且值以valule開頭的E元素######[attribute$=value]符合具有attribute屬性、且值以value結尾的E元素######[attribute*=value]符合具有attribute屬性、且值含有value的E元素######5. ###分析CSS樣式表、繼承、層疊與屬性的值## #######CSS裡有控制基本格式的屬性（如font-size和color等），有控制佈局的屬性（如position和float等），還有決定訪客列印時在哪裡換頁的列印控制元素。除此之外還有其他很多的屬性。 ###樣式表中包含定義網頁外觀的規則，每個規則都有兩個主要部分：選擇器（selection）和宣告區塊（declaration）。選擇器決定哪些元素受影響，聲明區塊有一個或多個屬性-值對組成，制定應該怎麼做。 ######6.### CSS特殊性、繼承與層疊#########標記為!important的聲明被稱為重要聲明，它沒有特殊性，不過要與非重要聲明分開考慮。 ###

具體而言：非重要聲明分為一組，它們之間的衝突使用特殊性解決；重要聲明分為一組，它們之間的衝突內部解決；重要聲明總是比非重要聲明優先。

相關問答

1. 一個沒有層疊上下文的元素如何比有的元素z-index 更大?

2. ios webview 載入html文件，在9.2下沒問題，但在8.1下底部出現橫向排版層疊

【相關推薦】

1. php中文網免費影片教學：《php.cn獨孤九賤（2）－css影片教學》

2. php中文網相關文章：CSS讓DIV重疊實例總結

以上是css中各種層疊樣式實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！