CSS Specificity 計算器

貼上 CSS selector 或 CSS 片段，在本機算出 A-B-C 權重、排序 selector、拆解 ID/class/type 貢獻，並提醒 :where、ID 過重與 nesting 風險。

CSS selector 或 CSS 片段

可直接貼 selector list，也可貼一段 CSS。工具會把 selector 拆出來，依 CSS specificity 的 A-B-C 規則計算；`:where()` 內權重為 0，`:is()`、`:not()`、`:has()` 會取參數中最高權重。

匯出報告

可貼進 issue、PR review 或樣式整理筆記。

這是靜態估算工具，適合排查 selector 權重與維護風險。真正套用結果仍會受到 cascade layer、來源順序、inline style、`!important`、shadow DOM 與瀏覽器支援差異影響。

使用說明

貼上單一 selector、逗號分隔 selector list，或整段包含 `{}` 的 CSS。
查看 A-B-C 權重：A 是 ID，B 是 class、attribute、pseudo-class，C 是元素與 pseudo-element。
切換權重排序或原始順序，找出哪條 selector 最可能壓過其他樣式。
複製或下載 Markdown / JSON 報告，放進 PR review、issue 或樣式整理筆記。

適合情境

需要快速處理「CSS Specificity 計算器」相關工作時,可以直接在這頁完成。貼上 CSS selector 或 CSS 片段，在本機算出 A-B-C 權重、排序 selector、拆解 ID/class/type 貢獻，並提醒 :where、ID 過重與 nesting 風險。這類工具也收在「數位工具」分類,方便之後一起找。

常見搜尋

CSS 權重怎麼算 selector specificity calculator :where 權重 :is :not :has specificity CSS 為什麼蓋不過 CSS selector 權重排序

常見問題

CSS specificity 的 A-B-C 是什麼？

A 代表 ID selector 數量，B 代表 class、attribute、pseudo-class 數量，C 代表元素名稱與 pseudo-element 數量。比較時先比 A，再比 B，再比 C。

:where() 為什麼不加權重？

:where() 依 CSS 規格本身和內部 selector 都是 0 權重，常用來寫可被覆蓋的基礎樣式。工具會提醒這點，避免你誤判。

:is()、:not()、:has() 怎麼算？

這些 functional pseudo-class 會取參數 selector list 裡最高的那組權重。工具會把這個最高權重加回目前 selector。

這能完全判斷 CSS 最後誰生效嗎？

不能完全取代瀏覽器 cascade。specificity 是核心因素，但實際結果還會受來源順序、cascade layer、inline style、!important、shadow DOM 和瀏覽器支援影響。

使用界線

此工具做靜態 selector 權重估算，不執行瀏覽器樣式計算。遇到 cascade layer、inline style、!important、shadow DOM 或複雜 nesting 時，仍建議搭配 DevTools 實際檢查。