CSS 選擇器的優先順序

XiSoil發表於2024-09-26

CSS選擇器的優先順序,也稱為特異性(Specificity),決定了當多個樣式規則應用於同一個元素時,哪個規則會生效。優先順序是由四個不同的優先順序層級組成的,分別是:

  1. 行內樣式:直接在HTML元素的style屬性中定義的樣式,優先順序最高。
  2. ID選擇器:在CSS中以#id形式定義的樣式。
  3. 類選擇器、偽類選擇器:在CSS中以.class:pseudo-class形式定義的樣式。
  4. 型別選擇器、偽元素選擇器:在CSS中以元素名稱或:pseudo-element形式定義的樣式。
  5. 通配選擇器、關係選擇器:在CSS中以*+>等關係符號定義的樣式。
  6. 繼承:從父元素繼承的樣式。
  7. !important規則:在CSS中使用!important宣告的樣式,優先順序最高但應該謹慎使用,因為它會打破正常的優先順序規則。

優先順序計算規則如下

  1. 行內樣式:1,0,0,0
  2. ID選擇器:0,1,0,0
  3. 類選擇器、偽類選擇器:0,0,1,0
  4. 型別選擇器、偽元素選擇器:0,0,0,1
  5. 通配選擇器、關係選擇器:0,0,0,0

當計算兩個或多個選擇器的優先順序時,會將它們的值相加,數值大的選擇器優先順序更高。

如果有多個選擇器具有相同的優先順序,那麼:

  • 最後定義的規則將會生效(在CSS中後定義的規則會覆蓋先定義的規則)。
  • 如果有**!important**規則,則具有!important的規則會覆蓋沒有!important的規則。

相關文章