如何查看浏览器计算的 CSS 特异性？

Question

问候：我花了几天时间试图找到一种工具，该工具可以显示浏览器计算出的每个 CSS 规则的确切 CSS 特异性编号。我已经查看了许多在线资源，包括 Tools to see CSS specificity - 那里的链接讨论了被覆盖的类等，但我想查看应用特定 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 和其他人已经引导我找到了解决我所面临的原始问题的可能解决方案。请参阅下面的 cmets 线程。考虑到这个问题是关于能否查看浏览器的特异性分数，我不妨让这个问题保持开放 - 很可能的答案是目前没有可用的工具能够做到这一点。

Answer 1

我一直在 Firefox 中使用 Firebug 插件。到目前为止，这对我有用。

Answer 2

在 Firefox 中的 inIDOMUtils API 中有一个 getSpecificity() function。

不过，要使用此 API，您必须编写自己的 Firefox 扩展程序。这个was requested for Firebug，虽然Firebug is discontinued 现在支持Firefox DevTools，它也有一个feature request for this。