CSS層疊特性相關教程

ＣＳＳ層疊特性確實很重要，但是要注意，千萬不要和“繼承”相混淆，二者有著本質的區別。實際上，層疊可以簡單地理解為“沖突”的解決方案。

例如有如下一段代碼，示例文件位於網頁ＣＳＳ教程資源“第１章＼１６．ｈｔｍ”。

代碼中一共有５組ｐ標記定義的文本，並在ｈｅａｄ部分聲明了４個選擇器，聲明為不同顏色。下面的任務是確定每一行文本的顏色。

●　第１行文本沒有使用類別樣武和ＩＤ＊Ｆ式，因此這行文奉顯示為標記選ａ＊８ｐ中定義的綠色。

●　第２行文本使用了類別樣式，因此這時已經產生了“沖突”。那麼，是按照標記選擇器ｐ中定義的綠色顯示，還是按照類別選擇器中定義的紅色顯示呢？答案是類別選擇器的優先級高於標記選擇器，因此顯示為類別選擇器中定義的紅色。

●　第３行文本同時使用了類別樣式和ＩＤ樣式，這又產生了“沖突”。那麼，是按照類別選擇器中定義的紅色顯示，還是按照ＩＤ選擇器中定義的藍色顯示呢？答案是ＩＤ選擇器的優先級高於類別選擇器，因此顯示為ＩＤ選擇器中定義的藍色。

●　第４行文本同時使用了行內樣式和ＩＤ樣式。那麼這時又以哪一個為准呢？答案是行內樣式的優先級高於ＩＤ樣式的優先級，因此顯示為行內樣式定義的橙色。

●　第５行文本中，使用了兩個類別樣武，應以哪個為准呢？答案是兩個類型選擇器的優先級相同，此時以前者為准，“．ｐｕｒｐｌｅ”定義在“．ｒｅｄ”的前面，因此顯示為“．ｐｕｒｐＩｅ”中定
義的紫色。

因此，綜上所述，上面這段代碼的最示效果如圖１所示。

圖１　層疊特性示意圖

總結：優先級規則可以表述為：行內樣式　＞　ＩＤ樣式　＞　類別樣式　＞　標記樣式

在復雜的頁面中，某一個元素有可能會從很多地方獲得樣式，例如一個網站的某一級標題整體設置為使用綠色，而對某個特殊欄目需要使用藍色，這樣在該欄目中就需要覆蓋通用的樣式設置。在很簡單的頁面中，這樣的特殊需求實現起來不會很難，但是如果網站的結構報復雜，就完全有可能使代碼變得非常混亂，可能出現無法找到某一個元素的樣式來自於哪條規則的情況。因此，必須要充分理解ＣＳＳ中“層疊”的原理。

注意：計算沖突樣式的優先級是一十比較復雜的過程，並不僅僅是上面這個簡單的優先級規則可以完全描述的。但是讀者可以把捶一個大的原則，就是。越特殊的樣式．優先級越高”。

例如，行內樣式僅對指定的一個元素產生影響，因此它非常特殊；使用了類別的某種元素，一定是所有該種元素中的一部分，因此它也一定比標記樣式特殊；以此類推，ＩＤ是針對某一個元素的，因此它一定比應用於多個元素的類別樣式特殊。特殊性越高的元素。優先級就越高。

最後再次提醒讀者，千萬不要混淆了層疊與繼承，二者完全不同。

以上就是精品學習提供的關於ＣＳＳ層疊特性的內容，希望能夠帶給您幫助。