CSS Specificity (CSS 權重）

[futianshen]

CSS 權重依據重要（稀有）-> 不重要（常用、全域）分為5個量級。

1. 大量級必定大於小量級權重
2. 權重大者優先執行，權重由大量級開始比較，若大量級的數字相同才去比較小量級
3. 若權重優先完全相同，後寫的指令取代先寫的指令執行。

• (1-0-0-0-0) （寫在 CSS 屬性值的後面）

  • !important

• (0-1-0-0-0) （寫在 html 的 style 屬性裡面）

  • inline-style-attribute

• (0-0-1-0-0) ( 一個頁面中只有一個 id，不會重複)

  • id

• (0-0-0-1-0) ( 一個頁面中可能有很多組重複)

  • .class
  • [attribute]
  • :pseudo-class

• (0-0-0-0-1)

  • element
  • ::pseudo-element
    • ::before
    • ::after

• (0-0-0-0-0)

  • *

• default (由繼承或各瀏覽器的初始值決定)

結論：CSS 最好從小量級開始寫

參考資料

Specificity Calculator