CSS 選擇器特異性計算器
免費線上 CSS 特異性計算器。輸入一或兩個選擇器，拆解 (a, b, c) 權重並比較特異性；結果不代表頁面實際套用的樣式。
CSS 選擇器特異性計算器
免費線上 CSS 特異性計算器。輸入一或兩個選擇器，拆解 (a, b, c) 權重並比較特異性；結果不代表頁面實際套用的樣式。
關於 CSS 特異性
特異性決定什麼
特異性是 CSS 級聯的其中一步。同一元素、同一屬性的宣告，會先比較來源、重要性（!important）與級聯層（layer）。這些及其他較高優先條件一致時，才由左至右比較選擇器的 (a, b, c) 權重。權重相同時，還可能先比較作用域接近程度，再看原始碼順序。
三個欄位
a 欄數 ID 選擇器，b 欄數 class、屬性與 pseudo-class，c 欄數元素型別與 pseudo-element。萬用選擇器、組合子與 :where() 不加分。:is()、:not()、:has() 貢獻其內部最具體參數的特異性。本工具替每個 token 標色，讓你看見它灌進哪一欄。
這個比較涵蓋什麼
每個欄位請輸入單一有效選擇器。工具不檢查 DOM 命中、宣告中的 !important、行內樣式或 layer，因此無法判定實際套用的樣式。若輸入逗號分隔的選擇器清單，顯示的是清單最高權重，不是命中某個元素的選擇器權重。無效輸入可能顯示 (0, 0, 0)，不代表它是有效的零特異性選擇器。
常見問題
關於這個主題的常見疑問與實用解答。
為什麼我的 CSS 沒生效？
特異性只是可能原因之一。請先用瀏覽器開發者工具確認選擇器是否命中元素、宣告是否有效，以及媒體查詢等條件是否成立，再檢查 !important、layer、行內樣式等級聯條件。本工具只比較選擇器權重，不會檢查你的頁面或判定實際套用的樣式。
為什麼 :where() 和 * 算 0？
:where() 就是設計成不加特異性，讓裡面的東西容易被覆蓋。萬用選擇器 * 與組合子也不加分。相對地 :is() 與 :not() 會取其內部最具體參數的特異性。
我的選擇器會被傳送到伺服器嗎？
工具在你的瀏覽器內解析與比較選擇器，不會將它們傳送到伺服器計算。
!important 和 layer 會改變 (a, b, c) 嗎？
不會。它們影響級聯優先順序，不會增加選擇器的特異性，所以 (a, b, c) 較大不保證宣告勝出。以作者樣式表中的宣告為例，一般宣告以較後的 layer 優先，重要宣告則以較前的 layer 優先；未分層的一般宣告優先於分層宣告，重要宣告的順序相反。