首頁 > 開發者 > 網站開發

1.6 CSS的層疊特性

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   class   blog   http   ext   color   

作為本章的最後一節，這裡主要講解CSS的層疊屬性。CSS的全名叫做“層疊樣式表”，讀者有沒有考慮過，這裡的“層疊”是什麼意思？為什麼這個詞如此重要，以至於要出現在它的名稱裡。

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

例如有如下一段代碼，樣本檔案位於網頁學習網CSS教程資源“第1章\16.htm”。

  1. <html> 
  2. <head> 
  3. <title>層疊特性</title> 
  4. <style type="text/css"> 
  5. p{                
  6.     color:green;      
  7.     }  
  8. .red{  
  9.     color:red;        
  10.     }  
  11. .purple{  
  12.     color:purple;                 
  13.     }  
  14. #line3{  
  15.     color:blue;  
  16.     }  
  17. </style> 
  18. </head> 
  19. <body> 
  20.     <p >這是第1行文本</p> 
  21.     <p class="red">這是第2行文本</p> 
  22.     <p id="line3" class="red">這是第3行文本</p> 
  23.     <p style="color:orange;" id="line3">這是第4行文本</p> 
  24.     <p class="purple red">這是第5行文本</p> 
  25. </body> 
  26. </html> 

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

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

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

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

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

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

因此，綜上所述，上面這段代碼的最示效果1所示。lodidance.com


圖1 層疊特性

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

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

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

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

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

本章重點

本章重點介紹了4個方面的問題。先介紹了HTML和XHTML的發展曆程以及需要注意的問題，然後介紹了如何將CSS引入HTML，接著講解了CSS的各種選取器，及其各自的使用方法，最後重點說明了CSS的繼承與層疊特性，以及它們的作用。

作為CSS設計的核心基礎，請讀者務必真正搞懂這些最基礎和核心的基本原理。

點擊下載第1~7章CSS教程資源 返回《CSS教程布局之道》教程列表
編輯：網頁學習網
本文地址:http://www.lodidance.com/css/jc/660.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More