CSS選擇器的優先順序,也稱為特異性(Specificity),決定了當多個樣式規則應用於同一個元素時,哪個規則會生效。優先順序是由四個不同的優先順序層級組成的,分別是:
- 行內樣式:直接在HTML元素的
style
屬性中定義的樣式,優先順序最高。 - ID選擇器:在CSS中以
#id
形式定義的樣式。 - 類選擇器、偽類選擇器:在CSS中以
.class
或:pseudo-class
形式定義的樣式。 - 型別選擇器、偽元素選擇器:在CSS中以元素名稱或
:pseudo-element
形式定義的樣式。 - 通配選擇器、關係選擇器:在CSS中以
*
或+
、>
等關係符號定義的樣式。 - 繼承:從父元素繼承的樣式。
- !important規則:在CSS中使用
!important
宣告的樣式,優先順序最高,但應該謹慎使用,因為它會打破正常的優先順序規則。
優先順序計算規則如下:
- 行內樣式:1,0,0,0
- ID選擇器:0,1,0,0
- 類選擇器、偽類選擇器:0,0,1,0
- 型別選擇器、偽元素選擇器:0,0,0,1
- 通配選擇器、關係選擇器:0,0,0,0
當計算兩個或多個選擇器的優先順序時,會將它們的值相加,數值大的選擇器優先順序更高。
如果有多個選擇器具有相同的優先順序,那麼:
- 最後定義的規則將會生效(在CSS中後定義的規則會覆蓋先定義的規則)。
- 如果有**!important**規則,則具有
!important
的規則會覆蓋沒有!important
的規則。