Question

问候：我花了好几天时间试图找到一个工具，它可以显示浏览器计算的每个CSS规则的确切CSS特性数。我已经查看了很多在线资源，包括Tools to see CSS specificity - 那里有关于被覆盖的类等的链接，但我希望看到在应用特定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中的getSpecificity() function API提供了inIDOMUtils。

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

Answer 2

如果您想查看浏览器的想法，请在IE中按F12或在其他浏览器中转到源。按下您希望查看其正在考虑的CSS的HTML标记。然后它会在右侧显示忽略代码的行。希望它有所帮助。

Answer 3

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

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

3 个答案: