CSS層疊和繼承
CSS具有兩個核心的概念——繼承和層疊。一般文本類的屬性會被繼承，即某個元素的CSS屬性會傳遞給內部嵌套的元素。一個元素可能有一個或者多個樣式的來源，當屬性發生沖突時，就會根據加載順序和權重大小決定層疊之後顯示的屬性。先看一個層疊機制表，並對照例子觀察層疊規律：
內嵌 id class 元素
內嵌 1 0 0 0
id 0 1 0 0
class、屬性、偽類 0 0 1 0
元素、偽元素 0 0 0 1
通配符* 0 0 0 0
!important 最高
對所有類型設置字體顏色，結果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css優先級測試</title>
<style>
#test{ color: orange;}
.test{ color: yellow; }
p{ color: green; }
*{ color: cyan; }
p{ !important; color: blue; }
span{ color: purple; }
</style>
</head>
<body>
<p style="color: red">內嵌紅色</p>
<p id="test">id橙色</p>
<p class="test">class黃色</p>
<p>元素綠色</p>
<p>通配青色</p>
<p>最高藍色</p>
<p> <span>子元素紫色</span> </p>
</body>
</html>
在頁面中顯示結果如下：
可以看到元素和通配符設置的CSS屬性沒有顯示本身的文字顏色，其余均正確顯示設置的顏色，檢查內嵌、id和class的樣式變化，結果如下：
可以看到，網頁先進行繼承，將通配給html和body的青色判定後，在進行對這個p元素的CSS顏色設置，隨後根據權重先後選擇了通配、元素、最高的顏色，最後鎖定類名設置的黃色，通過這樣的比較，前面6組都能得到結果，最後一個span檢查結果如下：
現在原因也是一目了然，span元素逐級繼承，此處的p元素文本是藍色，再對span元素進行層疊，有通配的青色和元素的紫色，由於元素優先級高，所有采用了元素設置的紫色。
對同一各元素，分別設置內嵌、id、class和元素選擇器設置顏色，內嵌字體顏色紅色，id橙色，class黃色，元素綠色，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css同一元素優先級測試</title> <style> #test{ color: orange;} .test{ color: yellow; } p{ color: green; } </style> </head> <body> <p id="test" class="test" style="color: red">同一元素測試</p> </body> </html>
網頁中顯示結果如下：
檢查其變換規則：
元素選擇器優先級最低，綠色最底層，偽類黃色其次，id橙色再層疊，內嵌優先級最高，紅色在最上方，最後顯示紅色。
總結一下，html的層疊是由通配、元素和偽元素、class和偽類、id、內嵌從底層往上層依次層疊，對於同一級的選擇器，具有!important;屬性的優先級最高，否則就要根據其放置的順序判斷。元素屬性從最大一級的祖先元素繼承，依次判斷繼承直至到該元素內容所在的設置有css樣式的最裏面一層。
CSS層疊和繼承