分類: 開發工具
CSS 優先級計算機
以 A-B-C 分數比較選擇器優先級
輸入一個以上的 CSS 選擇器，計算其 ID-類別-元素（A-B-C）優先級分數，並依高低排序，讓你清楚看出哪條規則會勝出。全程在瀏覽器內完成。
| 選擇器 | 優先級（A-B-C） | ID | 類別、屬性、偽類別 | 元素、偽元素 |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
當兩條 CSS 規則作用在同一個元素上時，勝出的是優先級較高的那條，而不是後寫的那條。優先級以三個數字計算：A 代表 ID 選擇器，B 代表類別、屬性選擇器與偽類別，C 代表元素選擇器與偽元素。這個工具會解析你輸入的每個選擇器，包括 :not()、:is()、:has() 以及優先級固定為零的 :where()，並列出各自的 A-B-C 分數，讓你直接比較，不必用猜的。
使用方式
- 每行輸入一個選擇器，例如 #nav .item > a:hover。
- 查看每個選擇器的 A-B-C 優先級分數。
- 依優先級排序，看出哪個選擇器在衝突時會勝出。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 我的 CSS 會被上傳到任何地方嗎？
- 不會。解析是由頁面內執行的 JavaScript 完成，來自私人樣式表的選擇器不會離開你的裝置。
- :not()、:is() 或 :has() 是怎麼計分的？
- 依照 CSS 規範，這些會以其內部優先級最高的參數計分，而 :where() 無論內容為何，優先級一律為零。
- 行內樣式或 !important 會影響這個分數嗎？
- 不會。這個工具只計算選擇器本身的分數。行內樣式屬性與 !important 都是直接凌駕於一般優先級之上，而不是疊加到 A-B-C 分數中。