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

Posted 2023-03-07

【中文标题】在 Chrome 开发工具中查看确切的 CSS 特性？

【英文标题】：See exact CSS specificity in Chrome Dev Tools?

【发布时间】：2018-11-18 11:35:43

【问题描述】：

我知道在 Chrome 开发工具中，对于选定的 html 元素，适用的 CSS 选择器会在样式选项卡中按特定顺序进行侦听。

但是是否可以在所选元素上查看每个规则的确切 CSS 特异性值？

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

【问题讨论】：

在计算端是

像this mockup 这样的东西真的很有用

【参考方案1】：

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

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

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

【参考方案2】：

Chrome 开发工具按类的特性从上到下对类进行排序。

看看这个：

检查一个元素（在本例中为 svg）并输入您想要查看其特异性的 css 属性（本例中为“高度”）。

最高的总是在上面！

【讨论】：

这不会直接在 Chrome 工具中显示特异性值 - 还是我遗漏了什么？

例如，我看不到格式为 0-0-1 的特异性值。最初的问题是“是否可以在所选元素上查看每个规则的确切 CSS 特异性值？”

【参考方案3】：

右键单击需要查看样式的元素； 选择

检查

； 控制台将打开。在它的右侧，您会看到

Styles

选项卡（默认打开）； 切换到

Computed

标签（从

Styles

向右）；

在此选项卡上，您将看到所有 CSS 样式及其值应用于元素。

更新

看来我误解了实际问题，抱歉。

Chrome 开发工具中似乎没有这样的东西。 看看这个issue。

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

【讨论】：

我在那里找不到我要找的东西。查看我的编辑。

@user1283776 尝试检查Show all 复选框，它会显示所有样式，甚至在浏览器级别。此外，还有一个Filter 字段（与Show all 在同一行），它是可点击的，您可以输入您要查找的值，例如0010 或0001。

这不显示特异性分数。 @htshame 我认为你误解了这个问题。

@Turnip 是的，你说得对，我的错。我已经更新了我的答案，看起来 Chrome 开发工具中没有这样的东西。