在CSS中,每個屬性都有一個優先級,當多個規則同時作用于同一個元素時,就需要根據優先級來決定哪個規則起作用。CSS優先級機制的基本原則是:樣式定義的特定程度越高,優先級就越高。但是,具體的優先級規則卻比較復雜。
優先級的計算方式:
內聯樣式(最高優先級) | ID選擇器 | 類選擇器、屬性選擇器、偽類選擇器 | 元素選擇器、偽元素選擇器 | 通配符選擇器、子選擇器、相鄰兄弟選擇器、后代選擇器 | 繼承樣式(最低優先級)
例如,以下規則中的屬性會作用于HTML文檔中所有h1元素:
h1 { color: blue; }
但是,如果我們再添加一個規則:
#header h1 { color: red; }
這個規則中的屬性也是作用于h1元素的。那么,當一個元素綁定了多個規則時,如何計算優先級呢?一般情況下,有以下幾個步驟:
- 計算內聯樣式(如果有)
- 計算ID選擇器
- 計算類、屬性、偽類選擇器
- 計算元素、偽元素選擇器
- 計算通配符、子選擇器、相鄰兄弟選擇器、后代選擇器
- 計算繼承樣式(如果有)
在同一級別的情況下,后面的規則會覆蓋前面的規則。例如:
h1 { color: blue; } h1 { color: red; }
這樣,h1元素的顏色就是紅色。
需要注意的是,!important可以將屬性賦予最高優先級,即使其他規則定義的優先級更高,也無法覆蓋!
上一篇css中hr的顏色