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

Question

问候:我花了几天时间试图找到一个工具,它可以显示浏览器计算的每个CSS规则的确切CSS特性数.我已经查看了许多在线资源,包括查看CSS特性的工具 - 那里有关于重写类等的链接,但我希望看到在应用特定CSS规则时浏览器计算和使用的确切特征数.

为什么我需要查看精确的CSS特异性计算？
我无法克服某个问题,即浏览器使用基于该规则与元素的接近度的CSS规则,但我之前定义了另一个规则,该规则应该具有比浏览器应用的规则更高的特异性.我没有一个简单的代码,我可以用来演示使用jsfiddle和我试图调试的代码太复杂,不包括在小提琴中.

几乎每一次搜索都会导致人们指向某种"CSS特殊规则"或"理解CSS特异性"链接.我理解CSS特性应该如何工作,广泛使用Firebug和Chrome开发人员工具,并且非常了解指向理解特异性规则的链接.我的任务是尝试查看一个浏览器引擎在将一个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在某种程度上是我需要查看计算特异性的代表性案例.无论如何,我认为能够将您计算的数字与浏览器的计算进行比较会很棒.

另一个编辑: 虽然我仍然没有回答我对浏览器特定元素的特异性得分的查询,但我认为浮士德和其他人已经让我找到了解决我面临的原始问题的可能方案.请参阅以下评论帖子.考虑到这个问题是关于能够查看浏览器的特异性得分,我不妨将这个问题保持开放 - 很可能的答案是,目前没有可用的工具可以做到这一点.

Answer 1

Firefox 中的API 提供了一个getSpecificity()功能inIDOMUtils.

要使用此API,您必须编写自己的Firefox扩展.这是Firebug的要求,虽然Firebug现在停止使用Firefox DevTools,它也有一个功能请求.