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静态片段以获得准确结果。