CSS 特異性「實際渲染」勝出規則檢測器用瀏覽器引擎驗證哪條 CSS 規則真正勝出

為什麼要「實際渲染」，不能只靠理論計算？

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

特異性 (a, b, c) 怎麼比？舉個例子

CSS 特異性用三個數字 (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 貼進來，選擇器打上你要檢查的元素，工具會列出所有匹配到的規則、各自的特異性分數，並用瀏覽器引擎判定最終誰贏，讓你不用再靠肉眼猜測層層疊加後的結果。

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