Chrome开发人员工具中CSS规则的显示顺序

Question

我一直在检查Chrome开发人员工具中的网页，并注意到CSS规则按字母顺序显示。我注意到，当我试图追踪通过其所有祖先应用于元素的规则的继承时。

有什么方法可以改变规则的显示顺序吗？或者也许这可以使用其他工具？

谢谢。

Answer 1

我建议你Firebug Lite。它不支持firefox的众所周知的firebug的所有功能，但仍然是Chrome的很棒工具。

Answer 2

如果您不特别喜欢Chrome，请查看Firefox扩展的Firebug。它显示了样式列表顶部的最具体的选择器，并且下面列出了来自父元素的级联样式，即通过接近您正在检查的元素。

Answer 3

您实际上可以自己编辑“检查员”。 其根本的HTML/JS

Check out C:\Users\--your username --\AppData\Local\Google\Chrome\Application\-- latest version --\Resources\Inspector

，因为你正在使用的工具，我要去假设你知道你在做什么，对它们进行编辑:)

Answer 4

CSS规则以级联顺序显示，而不是按字母顺序显示。结果，最顶层的属性会覆盖下面的属性。如果您的用例显示相反，请使用crbug.com（摘要中提及DevTools）或使用webkit.org/new-inspector-bug链接进行归档。