css中的層疊（級聯）的含義
阿新 • • 發佈：2018-12-26
CSS的全名叫做Cascading Style Sheets，譯為層疊樣式表（也可以叫級聯樣式表）。那麼“層疊”是什麼意思呢？為什麼這個詞如此重要
，以至於出現在它的名稱裡面。
層疊，可以簡單的理解為“衝突”的解決方案
，總結如下：
上程式碼：
執行結果如下：<html> <head> <title>層疊特性</title> <style type="text/css"> p{ color:green; } .red{ color:red; } .purple{ color:purple; } #line3{ color:blue; } </style> </head> <body> <p >這是第1行文字</p> <p class="red">這是第2行文字</p> <p id="line3" class="red">這是第3行文字</p> <p style="color:orange;" id="line3">這是第4行文字</p> <p class="purple red">這是第5行文字</p> </body> </html>
第一行，沒有其他的類別樣式，所以顯示為標記選擇器p中定義的綠色；
第二行，增加了類別樣式，有了“衝突”，那麼怎麼顯示呢？由於使用了類別的某種元素，一定是所有該種元素的一部分，因此它比標記樣式“特殊”，因為特殊，所以優先順序高，顯示為紅色。
第三行，增加了id樣式，與類別樣式“衝突”，由於ID是針對某一個元素的，唯一標記。所以ID比類別又要“特殊”，所以優先順序比較高，顯示為藍色。
第四行，增加了行內樣式，行內樣式僅僅針對指定的一個元素產生影響，比ID更加“特殊”，所以優先順序更高，顯示為橙色。
第五行，使用了兩個類別樣式，優先順序相同，怎麼辦？額
。。。。。這個由於.purple定義在.red的前面
，
<p class="purple red">，注意是class中定義的時候的前面，不是在style中寫的時候在前面，所以呢，就顯示為.purple中定義的紫色
。
ok，到此為止今天學習的css總結結束，歡迎大家批評指正哈。