我知道在Chrome开发工具中，对于选定的HTML元素，适用的CSS选择器会在样式选项卡中按特定顺序侦听。但是，是否有可能看到所选元素上每个规则的确切CSS特异性值？编辑：一个答案说我可以在computed选项卡中看到CSS特异性值，但我没有看到它。见下面的截图。也许我需要澄清一下，当我要求查看CSS特异性值时，我正在寻找一个数字，比如0010作为类选择器或0001作为元素选择器。
bwleehnv1#
Chrome开发工具按照类的特性从上到下进行分类。看看这个：
检查一个元素（在本例中是一个svg），并输入要查看其特性的css属性（在本例中是“height”）。最高的总是在上面！
ttcibm8c2#
chrome扩展“CSSDig”提供了一个解决方案，可以在chrome中找到0，0，0格式的特异性值这个扩展可以正常工作，但是有一些错误链接：https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco?utm_source=chrome-ntp-icon
bvn4nwqk3#
在这个选项卡上，你会看到所有的CSS样式及其应用到元素的值。
更新
看来我误解了实际问题，对不起。在Chrome开发工具中似乎没有这样的东西。看看这个issue。就目前而言，简单地显示一个数字并不像大多数用户认为的那样有用，我们有兴趣探索其他模式来解释被覆盖的值。
vngu2lb84#
Safari的开发者工具（截至2023-03年16.3.1）
1.在“元素”面板中检查元素。1.在CSS类窗格中：将鼠标悬停在选择器上。
Specificity: (X, Y, Z)
4条答案
按热度按时间bwleehnv1#
Chrome开发工具按照类的特性从上到下进行分类。
看看这个：
检查一个元素（在本例中是一个svg），并输入要查看其特性的css属性（在本例中是“height”）。
最高的总是在上面！
ttcibm8c2#
chrome扩展“CSSDig”提供了一个解决方案，可以在chrome中找到0，0，0格式的特异性值
这个扩展可以正常工作，但是有一些错误
链接：https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco?utm_source=chrome-ntp-icon
bvn4nwqk3#
在这个选项卡上，你会看到所有的CSS样式及其应用到元素的值。
更新
看来我误解了实际问题，对不起。
在Chrome开发工具中似乎没有这样的东西。看看这个issue。
就目前而言，简单地显示一个数字并不像大多数用户认为的那样有用，我们有兴趣探索其他模式来解释被覆盖的值。
vngu2lb84#
Safari的开发者工具（截至2023-03年16.3.1）
1.在“元素”面板中检查元素。
1.在CSS类窗格中：将鼠标悬停在选择器上。
Specificity: (X, Y, Z)。