问候：我花了几天时间试图找到一个工具，可以显示浏览器计算的每个 CSS 规则的确切 CSS 特异性数。我已经查看了许多在线资源，包括查看 CSS 特异性的工具——那里的链接讨论了被覆盖的类等，但我想查看应用特定 CSS 规则时浏览器计算和使用的确切特异性数。
为什么我需要查看准确的 CSS 特异性计算？
我无法克服浏览器使用基于该规则与元素的接近程度的 CSS 规则的某个问题，但我在它之前定义了另一个规则，该规则应该比浏览器应用的规则具有更高的特异性。我没有可以用来演示使用 jsfiddle 的简单代码，而且我尝试调试的代码太复杂而无法包含在小提琴中。
几乎每次搜索都会导致人们指向某种“CSS 特异性规则”或“理解 CSS 特异性”链接。我了解 CSS 特异性应该如何工作，广泛使用 Firebug 和 Chrome 开发人员工具，并且非常了解指向理解特异性规则的链接。我的任务是尝试了解浏览器引擎在将一个 CSS 规则应用于另一个 CSS 规则时的想法！而且由于它已经计算了这个信息来决定哪个规则覆盖其他规则，所以它应该是可访问的信息，但我不知道如何？
我面临的问题的一个非常基本的例子：
.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }
或者它可以被编码成这样......（在最终结果中没有任何不同。）
.testClass1 .title { corresponding CSS styles } --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles } --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles } --- call it Rule 4
HTML结构看起来像这样......
<!-- delivers intended results -->
<div class="testClass1">
<div class="title">Some Title</div>
</div>
<!-- Does not deliver intended results.
- I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
applied because of its proximity to the actual HTML element.
i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
<div class="testClass1">
<div class="title">Some Title</div>
</div>
</div>
我认为调试此问题的最佳方法是查看浏览器的 CSS 特异性计算是什么，而不是我不得不假设某些规则并每次手动计算它。此外，浏览器在应用它时已经计算过了，所以我一直在寻找工具来查看浏览器对这些特异性规则的计算，但在 Firebug 或 Chrome 检查器中找不到任何方法。
有没有其他人知道这一点，有人能指出我可能存在的工具吗？我非常感谢您的帮助。谢谢！
编辑： 我试图拼凑一个小提琴，看看我是否可以重现“我正在努力解决的问题”来演示。我想，我很幸运 - 请参阅http://jsfiddle.net/smallworld/abvHC/1/。这个小提琴中的问题仍然太简单了，但有点代表我的挑战，其中类是动态分配的，所以我无法预测确切的顺序。小提琴中的示例 3 在某种程度上是我需要查看计算出的特异性的代表性案例。无论如何，我认为能够将您计算的数字与浏览器的计算进行比较会很棒。
另一个编辑： 虽然我仍然没有答案来查看浏览器对给定元素的特异性得分，但我认为 Faust 和其他人已经引导我找到了解决我所面临的原始问题的可能解决方案。请参阅下面的评论线程。考虑到这个问题是关于能够查看浏览器的特异性分数，我不妨让这个问题保持开放——很可能的答案是目前没有可用的工具可以这样做。