網頁設計一定要弄懂的基本功就是CSS Specificity，所謂的權重(Specificity)機制就是指 css 的優先權，例如：相同權重但是後寫的 css 可以覆蓋先寫的 css、當兩個選擇器同時作用在一個元素，權重高的生效！但是這些權重是怎麼計算的呢？

CSS 權重機制完整指南：掌握網頁設計的關鍵

在現代網頁設計中，CSS(層疊樣式表)扮演著關鍵角色。當您在開發網頁時，是否曾經困惑為什麼某些 CSS 規則會覆蓋其他規則？這就涉及到了 CSS 權重(Specificity)機制，這個機制是每個網頁設計師都必須深入理解的核心概念。

CSS 權重機制的本質

CSS 權重機制是瀏覽器用來決定樣式優先級的評分系統。當多個 CSS 規則同時作用於同一個元素時，瀏覽器會根據權重分數來確定最終呈現的樣式。理解這個機制對於建立可維護的網頁設計專案至關重要。

基本示例

讓我們看一個簡單的例子：

html
<p class="text" id="intro">你好,世界!</p>

<style>
p { color: blue; } /* 元素選擇器 */
.text { color: red; } /* 類別選擇器 */
#intro { color: green; }      /* ID選擇器 */
</style>

在這個例子中，段落文字最終會呈現綠色，因為 ID 選擇器(#intro)擁有最高的權重分數。

CSS 權重層級詳解

為了更清楚地理解 CSS 權重機制，我們可以將其視為一個精確的計分系統：

選擇器類型
權重分數
應用場景
行內樣式
1000
直接添加在HTML元素上
ID選擇器
100
使用#符號選擇特定元素
類別選擇器/屬性選擇器/偽類
10
使用.符號或[]選擇元素
元素選擇器/偽元素
1
直接使用標籤名稱選擇

深入解析各層級

1. 行內樣式 (1000分)

html
<p style="color: purple;">行內樣式示例</p>

這是最高權重的樣式設定方式，但在網頁設計中應該謹慎使用，因為它降低了代碼的可維護性。

2. ID選擇器 (100分)

css
#header { background-color: yellow; }

雖然權重較高，但在現代網頁設計中建議限制使用，以保持CSS的模組化。

3. 類別選擇器/屬性選擇器/偽類 (10分)

css
.button { padding: 10px; }
[type="text"] { border: 1px solid; }
:hover { cursor: pointer; }

這是網頁設計中最常用且最靈活的選擇器類型。

4. 元素選擇器/偽元素 (1分)

css
p { font-size: 16px; }
h1::after { content: "!"; }

基礎但重要的選擇器類型，常用於設定網頁的基本樣式。

CSS 權重衝突解析

在實際的網頁設計中，經常會遇到選擇器衝突的情況。以下是兩個典型例子：

範例1：ID vs 類別選擇器

html
<div id="main" class="box">內容</div>

<style>
#main { background-color: blue; }  /* 權重:100 */
.box { background-color: red; }    /* 權重:10 */
</style>

在這個例子中，元素會呈現藍色背景，因為ID選擇器的權重(100)高於類別選擇器(10)。

範例2：複合選擇器

html
<ul class="list">
  <li>列表項目</li>
</ul>

<style>
.list > li { color: green; }     /* 權重:11 (類別10 + 元素1) */
ul > li { color: red; } /* 權重:2 (元素1 + 元素1) */
</style>

這裡.list > li的規則會生效，因為它的總權重(11)高於ul > li(2)。

!important的角色與使用時機

在網頁設計中，!important是一個強大但具有爭議性的CSS特性：

css
.text { color: blue !important; }
p { color: red; }

!important會覆蓋正常的CSS權重機制，強制應用特定樣式。然而，在專業的網頁設計中，應該謹慎使用這個特性。

專業網頁設計中的CSS權重最佳實踐

1. 優先使用類別選擇器，避免過度依賴ID選擇器
2. 建立清晰的CSS架構，採用BEM或SMACSS等命名規範
3. 實施模組化的CSS設計模式
4. 使用預處理器(如Sass或Less)管理樣式層級
5. 定期進行代碼重構，消除不必要的權重疊加

調試CSS權重問題的專業方法

1. 善用瀏覽器開發者工具的樣式面板
2. 使用權重計算器進行驗證
3. 建立樣式規範文檔
4. 實施CSS代碼審查機制
5. 使用自動化測試工具檢查樣式衝突

總結

記住，優秀的網頁設計不僅要考慮當前的需求，還要為未來的擴展和維護預留空間。通過合理運用CSS權重機制，我們可以建立起更加靈活和可擴展的樣式系統。