CSS權重（CSS Specificity）是用來決定哪個樣式優先應用於一個 HTML 元素的規則。
權重越高，選擇器的優先級就越高，樣式就越可能被套用。

一、權重的計算方式

CSS權重由四個部分組成，分別代表不同類型的選擇器。這四部分的順序和權重如下：

• 內聯樣式（Inline Styles）：HTML 元素的 style 屬性。
• ID 選擇器（ID Selectors）：使用 #id 選擇器。
• 類選擇器（Class Selectors）、屬性選擇器（Attribute Selectors）和偽類（Pseudo-classes）：包括 .class、[attribute=value]、:hover 等，權重中等。
• 元素選擇器（Element Selectors）和偽元素（Pseudo-elements）：最低的權重，如 div、h1、::before 等。

權重計算的格式可以表示為 (a, b, c, d)，其中：

• a：內聯樣式（Inline Styles）
• b：ID 選擇器（ID Selectors）
• c：類選擇器（Class Selectors）、屬性選擇器（Attribute Selectors）和偽類（Pseudo-classes）
• d：元素選擇器（Element Selectors）和偽元素（Pseudo-elements）

二、權重範例

• 1-0-0-0：內聯樣式

  <div style="color=white;"></div>

• 0-1-0-0：ID 選擇器

  #id {
      color=blue;
  }

• 0-0-1-0：類選擇器、屬性選擇器和偽類

  [name=value] {
      color=red;
  }
  .class {
      color=red;
  }
  :hover {
      color=red;
  }

• 0-0-0-1：元素選擇器和偽元素

  input {
      color=green;
  }
  ::after {
      color=green;
  }

三、特殊用法

• *：全站預設值（0-0-0-1）

  * {
      color=black;
  }
  

• !important 關鍵字（1-0-0-0-0）

  p {
      color: yellow !important; // 覆蓋其他權重較高的樣式
  }
  

  1.使用時需要謹慎使用，樣式增加維護成本會相對提高。

  2.如果多個樣式都使用 !important ，仍然需要根據權重來決定哪個樣式生效。

四、管理 CSS 權重

• 避免過度依賴 ID 選擇器，ID 選擇器的權重很高，可能會導致樣式難以覆蓋。開發時盡量使用類選擇器更為靈活。
• 使用命名規範，例如：BEM（Block Element Modifier）或 SMACSS（Scalable and Modular Architecture for CSS），有規劃的去組織樣式，減少權重衝突。
• 避免過於複雜的選擇器層級，這樣會使權重變得難以管理。

五、結語

CSS 權重是網頁設計中不可忽視的重要概念，理解其運作原理可以幫助你更好地控制頁面元素的外觀，避免意外的樣式覆蓋問題。
可使用命名規範進行設計，有助於編寫出容易維護的樣式表。