CSS 優先級計算器 - Free Online Tool | PivaBox

計算 CSS 選擇器優先級 — 視覺化 (a, b, c) 分解，支援對比模式和選擇器解析

如何使用 CSS 優先級計算器

1. 在輸入框中輸入或貼上一個 CSS 選擇器 — 例如 ul li、.class、#id、.class1.class2，或複雜選擇器如 div#id.class
2. 查看以視覺化 (a, b, c) 分解顯示的優先級結果 — ID（a）、類別/屬性/偽類（b）和元素/偽元素（c）— 總優先級值計算公式為 a*100 + b*10 + c
3. 可選擇展開對比模式，輸入第二個選擇器以查看哪個選擇器在 CSS 層疊中勝出。查看內聯樣式和 !important 說明以了解邊緣情況。

Frequently Asked Questions

CSS 優先級計算器是免費的嗎？

是的，PivaBox CSS 優先級計算器完全免費使用。沒有任何費用、訂閱或隱藏收費。所有計算均在您的瀏覽器中本機執行。

優先級是如何計算的？

優先級以三分量值 (a, b, c) 計算，其中 <strong>a</strong> 計算 ID 選擇器，<strong>b</strong> 計算類別選擇器、屬性選擇器和偽類，<strong>c</strong> 計算類型選擇器和偽元素。總值為 a*100 + b*10 + c。值越高，在層疊中的優先級越高。

!important 和內聯樣式如何處理？

內聯樣式（HTML 元素上的 style 屬性）始終覆蓋樣式表規則，無論優先級如何。!important 標誌會覆蓋正常的優先級規則 — !important 規則優於非 !important 規則。當兩個 !important 規則衝突時，正常的優先級規則決定勝者。該工具包含說明來解釋這兩種邊緣情況。