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

Question

问候语:我花了好几天时间试图找到一个工具来显示浏览器计算的每个 CSS 规则的确切 CSS 特异性数。我已经看过很多在线资源，包括 Tools to see CSS specificity - 那里的链接讨论了重写的类等，但我想查看浏览器在应用特定 CSS 规则时计算和使用的确切特异性数字。

为什么我需要查看精确的 CSS 特异性计算？
我无法克服浏览器使用基于该规则与元素的接近度的 CSS 规则的某个问题，但我在它之前定义了另一个规则，它应该比浏览器应用的规则具有更高的特异性。我没有可用于演示使用 jsfiddle 的简单代码，而且我尝试调试的代码太复杂而无法包含在 fiddle 中。

几乎每次搜索都会导致人们指向某种“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 检查器中找不到任何方法。

还有其他人知道这件事吗？谁能告诉我一个可能存在的工具？非常感谢你的帮助。谢谢!

编辑:我试着把 fiddle 放在一起，看看我是否可以重现“我正在努力解决的问题”来进行演示。我想，我很幸运 - 请参阅 http://jsfiddle.net/smallworld/abvHC/1/ .这个 fiddle 中的问题仍然太简单，但代表了我的挑战，其中类是动态分配的，所以我无法预测确切的顺序。 fiddle 中的示例 3 在某种程度上是一个代表性案例，说明了为什么我需要查看计算出的特异性。无论如何，我认为能够将您计算的数字与浏览器的计算进行比较会很棒。

另一个编辑:虽然我仍然没有找到答案来了解浏览器对给定元素的特异性得分，但我认为 Faust 和其他人已经引导我找到了一个可能的解决方案来解决我所面临的原始问题。请参阅下面的评论线程。考虑到这个问题是关于能够查看浏览器的特异性得分，我不妨让这个问题悬而未决 - 很可能的答案是目前没有可用的工具可以做到这一点。

Answer 1

在 Firefox 切换到 WebExtensions 之前，有一个 getSpecificity() function在 Firefox 的 inIDOMUtils API 中可用。

不过，要使用此 API，您必须编写自己的 Firefox 扩展。

明显是 Firefox DevTools already use an internal API for that但信息似乎还没有显示在任何地方。因此有一个 feature request to show it somewhere .

不幸的是，也没有将此信息公开给扩展的 WebExtension API。