萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS層疊特性相關教程

CSS層疊特性相關教程

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

例如有如下一段代碼,示例文件位於網頁CSS教程資源“第1章\16.htm”。

CSS層疊特性

代碼中一共有5組p標記定義的文本,並在head部分聲明了4個選擇器,聲明為不同顏色。下面的任務是確定每一行文本的顏色。

● 第1行文本沒有使用類別樣武和ID*F式,因此這行文奉顯示為標記選a*8p中定義的綠色。

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

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

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

● 第5行文本中,使用了兩個類別樣武,應以哪個為准呢?答案是兩個類型選擇器的優先級相同,此時以前者為准,“.purple”定義在“.red”的前面,因此顯示為“.purpIe”中定
義的紫色。

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


CSS層疊特性


圖1 層疊特性示意圖


總結:優先級規則可以表述為:行內樣式 > ID樣式 > 類別樣式 > 標記樣式

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

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

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

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

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

copyright © 萬盛學電腦網 all rights reserved