Css 如何查看浏览器'；什么是特异性？

问候语：我花了好几天的时间试图找到一个工具，它可以显示浏览器计算出的每个CSS规则的确切CSS专用性编号。我已经看过很多在线资源，包括-其中的链接讨论了覆盖的类等，但我想看到浏览器在应用特定CSS规则时计算和使用的确切的特定性数字

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

几乎每次搜索都会导致人们指向某种“CSS特定性规则”或“理解CSS特定性”链接。我了解CSS专用性应该如何工作，广泛使用Firebug和Chrome开发工具，并且非常了解指向理解专用性规则的链接我的任务是尝试和窥探浏览器引擎在应用一个CSS规则时的想法而且因为它已经计算了这个信息来决定哪个规则优先于其他规则，所以它应该是可访问的信息，但我不知道如何访问

我面临的问题的一个非常基本的例子：

.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }

或者它可以这样编码。。。。（最终结果没有任何不同。）

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 inspector中找不到任何方法

有没有人知道这一点，有没有人能告诉我一个可能存在的工具？我非常感谢你的帮助。谢谢大家!

编辑： 我试着把一把小提琴放在一起，看看我是否能复制出“我正在挣扎的东西”来展示。我想，我很幸运——请看。这把小提琴中的问题仍然太简单，但代表了我的挑战，即类是动态分配的，因此我无法预测确切的顺序。小提琴中的例子3是一个典型的例子，说明了为什么我需要看到计算出的特异性。在任何情况下，我认为能够将您的计算结果与浏览器的计算结果进行比较将是非常棒的

另一次编辑：

---

虽然我还没有找到答案来窥探浏览器对给定元素的特异性得分，但我认为浮士德和其他人已经引导我找到了一个可能的解决方案，来解决我所面临的原始问题。请参阅下面的评论。考虑到这个问题是关于能否查看浏览器的特异性评分，我不妨将这个问题留待讨论——很有可能的答案是，目前还没有能够这样做的工具。

我一直在Firefox中使用Firebug插件。到目前为止，这对我来说是可行的。

Firefox的API中有一个可用的

---

不过，要使用此API，您必须编写自己的Firefox扩展。这一点，虽然现在有利于Firefox开发工具，它也有一个。开发者工具显示了所有这些信息（除了实际的数字），为什么不自己计算呢？你的特长是0,2,0,0,3,0,0,2,0和0,3,0。。。它们不难计算，浏览器计算它们的方式与其他浏览器没有任何不同。第二条规则比第三条规则更为具体，而且永远胜过第三条规则。如果你看到了意想不到的结果，那么你在某处有其他的风格或打字错误。我保证浏览器不会应用基于“邻近性”的CSS试着检查Chrome开发者工具，看看哪些CSS选择器与你的元素匹配，并确保你的CSS是有效的。SLaks-这个确切的数字就是我要寻找的，因为我的理解和浏览器的解释似乎不一致，所以我想了解我缺少的是什么…@animuson:浏览器如何计算具有大量元素的选择器的特定性。看，我知道这并不能回答你的问题，但在你的小提琴中，你的第三个（共5个）格与你的每个风格规则中的3-clasname选择器相匹配。因此，每个规则的特异性为0.3.0，第二个规则通过级联获胜。您可以通过颠倒CSS中样式规则的顺序来看到这一点第三行变为绿色。据我所知，这不会在选择器上显示“计算的特异性”。它只显示应用的选择器。这个问题与查看浏览器正在为选择器计算的实际计算值有关。没错，Firebug还没有显示这个值。塞巴斯蒂安，在发布这个问题之前，我确实看过你提供的Firebug链接，我不认为在这方面发生了什么。此外，在看到你的回答中firebug线程上的每个人似乎都感到困惑之后，我详细地阐述了我的问题。然而，我认为您对getSpecification（）的第一个链接提供了一个很好的答案，即在这个方向上有一些变化，但还没有扩展！感谢您找到并分享这些信息。我会接受这一点作为答案。谷歌代码档案中关于这个问题的链接，你称之为，已经死了。Firebug现在已经停止了。所以我相应地更新了我的答案。谢谢你的提示！

<!-- 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>