在Chrome开发工具中查看确切的CSS特异性？

Question

我知道在Chrome开发工具中，对于选定的HTML元素，可以在“样式”标签中按照特定顺序监听适用的CSS选择器。

但是有可能在所选元素上看到每条规则的确切CSS特异性值吗？

编辑：一个答案说我可以在计算选项卡中看到CSS特异性值，但我在那里看不到它。见下面的截图。也许我需要澄清一下，当我要求查看CSS特异性值时，我正在为类选择器寻找类似0010的数字，或者为元素选择器寻找0001。

Answer 1

Chrome开发者工具按自上而下的顺序对类进行分类。

检查一下：

检查一个元素（在本例中为svg），然后键入要查看其特异性的css属性（在本例中为“高度”）。

最高永远在最前面！

Answer 2

• 右键单击您需要查看样式的元素;
• 选择检查;
• 控制台将会打开。在它的右侧，您会看到样式标签（默认情况下它会打开）;
• 切换到计算标签（从样式右侧）;

在此标签上，您会看到所有CSS样式及其应用于元素的值。

<强>更新

看起来我误解了实际的问题，对不起。

Chrome Dev Tools似乎没有这样的东西。 看看这个issue。

  

就目前而言，简单地显示一个数字并不像大多数用户看起来那样有用。我们有兴趣探索其他模式来解释被覆盖的值。

Answer 3

chrome扩展名“ CSS Dig”为查找chrome中0、0、0格式的特异性值提供了一种解决方案

该扩展程序可以正常工作，但有一些错误

链接： https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco?utm_source=chrome-ntp-icon