CSS优先级检查器：看真实渲染结果
译注：本文编译自 dev.to 文章《CSS Specificity Real Render Winner Rule Checker》，作者介绍了一款结合浏览器实际渲染与优先级解析的 CSS 调试工具。原文链接见文末。
从「算分数」到「看结果」
许多开发者在遇到 CSS 声明「不生效」时，习惯打开优先级计算器。这类工具会返回一个整齐的 (a,b,c) 分数，但开发者仍需自行回忆源码顺序、!important、选择器是否真正匹配，以及浏览器在层叠之后最终计算出的值。分数有助于解释冲突，却并不等同于观察渲染结果。
这款工具采用了一种刻意混合的思路：将粘贴的 HTML 与 CSS 渲染进一个隐藏的 iframe，读取浏览器的计算值，同时单独解析声明，解释哪条匹配规则应当胜出。这样得到的是一个具体数值加上可检查的理由，而不是一个不透明的数字。
浏览器获得独立文档
分析器会创建一个固定、不可见的 iframe，只把用户提供的标记写入其中：
const iframe = document.createElement("iframe");
iframe.style.cssText =
"position:fixed;top:-9999px;left:-9999px;width:1000px;height:600px;" +
"opacity:0;pointer-events:none;z-index:-1";
document.body.appendChild(iframe);
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write(
`<!DOCTYPE html><html><head><style>${cssInput.value}</style>` +
`</head><body>${htmlInput.value}</body></html>`
);
doc.close();随后用 querySelector 解析指定的选择器，并用 getComputedStyle 检查选中的元素：
const computedStyle = iframe.contentWindow.getComputedStyle(el);
const computedValue = computedStyle.getPropertyValue(prop).trim();这对颜色、继承属性以及浏览器归一化等值尤为重要。返回的是这个独立文档实际计算出的值，而不仅仅是解析器认为声明写了什么。
优先级仍可作为解释
组件会计算熟悉的三段式分数：ID 计入 a，类、属性和伪类计入 b，类型选择器和伪元素计入 c：
const score = idCount * 10000 + classCount * 100 + typeCount;
return {
a: idCount,
b: classCount,
c: typeCount,
score,
str: `(${idCount},${classCount},${typeCount})`,
};在计数之前，它会展开 :not(...) 的内容用于计数，并把属性内容替换为 [x]。之后在查找类型选择器之前，移除 ID、类、属性和伪类。这是一个面向该工具所检查片段的实用解析器，而非标准完整的 CSS 语法。
声明通过正则表达式查找，多选择器规则按逗号拆分，并连同源码顺序一起存储：
const declRe = /([\w-]+)\s*:\s*([^;!]+)(\s*!\s*important)?;?/g;
// ...
props[propName] = { value, important };对于每个请求的属性，匹配规则先按优先级分数排序，再按源码顺序排序。带 !important 的声明会获得一百万分的偏移：
score: r.props[prop].important
? spec.score + 1000000
: spec.score,
sourceOrder: r.sourceOrder,结果表保留所有匹配的声明，将第一条高亮为胜出者，并在其旁显示 !important。如果属性名包含 color 或 background，组件还会测试计算值能否赋给一个临时元素，以便显示色块。
计算值与胜出解释为何可能不一致
iframe 是计算属性值的真相来源，但展示的胜出者来自组件简易解析器和分数。在调试简写属性、继承、浏览器默认值或解析器无法识别的语法时，这一区别值得留意。该工具还通过收集 CSS 文本中最多十二个匹配 ([\w-]+)\s*: 的属性名来自动检测属性；它不会检查浏览器完整的计算样式列表。
好消息是，这让输出更易读。你可以在同一张表中看到实际值、本地解释排名第一的选择器、所有匹配规则及其 (a,b,c) 值。你也可以用极小的复现示例替换默认内容，而不必加载整个应用。
默认复现示例刻意做得很小：一个 .text 段落位于 .container#main 内，.text、.container .text、p.highlight 和 #main p 都在争夺 color 与 font-size。这是一个有用的健全性检查，因为胜出的 ID 规则并不是样式表中的最后一条规则。你还可以点击「Auto-detect from CSS」；该辅助功能用简单正则收集属性名，转为小写，用 Set 去重，并在填充输入前将列表限制为十二个属性。
仅支持静态片段
iframe 不加载外部字体或图片，也不执行外部 JavaScript。Shadow DOM 和 CSS-in-JS 动态注入的样式不在该输入模型范围内。CSS 解析器刻意基于正则，因此嵌套大括号、包含分号的异常声明值或高级语法，可能与生产样式表的解析结果不同。如果选择器无效或没有元素匹配，组件会如实报告，而不是假装存在胜出者。
作者将这一调试流程做成了一款免费小工具：CSS Specificity Real Render Winner Rule Checker。粘贴能复现冲突的最小 HTML/CSS 示例，然后用表格判断修复应落在选择器、源码顺序还是声明本身。