CSS 選擇器特異性計算器 - 看懂哪條選擇器會勝出、樣式為何沒生效

關於 CSS 特異性

特異性決定什麼

當兩條 CSS 規則指向同一個元素、又設定同一個屬性時，瀏覽器需要一個裁判：特異性。每個選擇器得到一個以三個數字 a, b, c 表示的權重。由左而右比較，高者勝。只有完全相同時，才由原始碼順序（或 !important）決定。這就是為什麼一條更具體的規則會悄悄蓋掉你剛寫的那條。

三個欄位

a 欄數 ID 選擇器，b 欄數 class、屬性與 pseudo-class，c 欄數元素型別與 pseudo-element。萬用選擇器、組合子與 :where() 不加分。:is()、:not()、:has() 貢獻其內部最具體參數的特異性。本工具替每個 token 標色，讓你看見它灌進哪一欄。

常見問題

關於這個主題的常見疑問與實用解答。

為什麼我的 CSS 沒生效？

通常是另一條指向同一元素的規則特異性更高，所以就算你的寫在後面也是它贏。把兩個選擇器貼進來比較 (a, b, c) 權重，就能看出是哪一欄決定的。

為什麼 :where() 和 * 算 0？

:where() 就是設計成不加特異性，讓裡面的東西容易被覆蓋。萬用選擇器 * 與組合子也不加分。相對地 :is() 與 :not() 會取其內部最具體參數的特異性。

我的選擇器會被傳送到伺服器嗎？

不會。所有解析與比較完全在你的瀏覽器中執行，你輸入的任何內容都不會離開你的裝置。