CSS 選擇器權重偵測器用真實瀏覽器引擎驗證哪條 CSS 規則真正勝出

HTML 片段

<div class="container" id="main">
  <p class="text highlight">Hello, World!</p>
</div>

CSS 規則

/* Specificity: (0,1,0) */
.text {
  color: red;
  font-size: 16px;
}

/* Specificity: (0,2,0) - should win over .text */
.container .text {
  color: blue;
  font-size: 18px;
}

/* Specificity: (0,1,1) */
p.highlight {
  color: green;
  font-size: 14px;
}

/* Specificity: (1,0,1) - ID wins all */
#main p {
  color: purple;
}

要檢測的元素選擇器

要分析的 CSS 屬性（逗號分隔）

薪水小偷神器登場！

超隱密上班偷看影片聽小說

不用綁卡可以直接試用

有喜歡只要一杯咖啡錢就能用一輩子

前往微軟商店

目前僅支援 Windows 11 / 10

💡

你可能也需要

→正則表達式測試器 →亂碼修復工具（多語言編碼）→批量Log多重Regex篩選統計儀表板

CSS 規則衝突排查：為什麼「實際渲染」比理論權重計算更準確？

網路上大部分的 CSS 權重計算工具（也叫 CSS specificity 計算器、選擇器優先級計算器），只是把你的選擇器丟進公式算出一組分數，例如 #main p 是 (1,0,1)、.card.active 是 (0,2,0)。但真實瀏覽器判斷「哪條規則生效」時，還要考慮繼承、CSS 層疊順序、!important，甚至同一個屬性在不同規則裡的寫法差異——這些理論計算器全部忽略。本工具改用另一種做法：把你貼的 HTML 和 CSS 丟進隱藏的 iframe 讓瀏覽器「真的渲染一次」，再用 getComputedStyle() 讀出瀏覽器實際套用的樣式，所以看到的結果保證是瀏覽器的真實判定，不是紙上算出來的分數。

選擇器權重 (a, b, c) 怎麼比？舉個例子

CSS 選擇器權重（specificity / 優先級）用三個數字 (a, b, c) 表示：a 是 ID 選擇器數量、b 是 class／屬性／偽類選擇器數量、c 是元素／偽元素選擇器數量。比較時「位數高的先贏」，就像比大小一樣：a 相同才比 b，b 也相同才比 c。例如 #main p 是 (1,0,1)，.card .title.active 是 (0,3,0)——因為 a：1 > 0，所以 #main p 贏，即使後者疊了三個 class 選擇器。若兩條規則權重完全一樣，瀏覽器會採用「後面定義的規則」，這就是為什麼 CSS 檔案裡規則的先後順序也很重要。而 !important 是唯一能無視選擇器權重直接翻盤的機制——就算權重輸了，掛上 !important 照樣贏（除非對手也有 !important，那就繼續比權重）。

什麼時候該用這個工具？

最常見的場景是「我明明寫了這行 CSS，畫面卻沒變」——這通常代表有另一條選擇器權重更高（或有 !important）的規則蓋掉了你的樣式。把衝突的 HTML+CSS 貼進來，選擇器打上你要檢查的元素，工具會列出所有匹配到的規則、各自的權重分數，並用瀏覽器引擎判定最終誰贏，讓你不用再靠肉眼猜測層層疊加後的結果。排查 CSS 蓋不過、!important 衝突、選擇器優先級問題，這個工具給你瀏覽器等級的最終答案。

本工具在隔離的 iframe 中渲染，不會載入外部字型、圖片或執行外部 JavaScript，也不支援 Shadow DOM 或 CSS-in-JS 執行後動態產生的樣式；請貼入純 HTML/CSS 靜態片段以取得準確結果。