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

Question

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

有没有办法更改规则的显示顺序？或者也许可以使用其他工具？

感谢。

Answer 1

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

Answer 2

您实际上可以自己编辑“检查员”。 它只是简单的Html / Js

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

因为你正在使用这些工具我会假设你知道你在做什么来编辑它们：）

Answer 3

我建议你Firebug Lite。它不支持着名的firefox for firefox的所有功能，但仍然是Chrome的绝佳工具。

Answer 4

如果您没有特别依赖Chrome，请查看Firefox扩展程序Firebug。它显示了样式列表顶部最具体的选择器，下面列出了父元素的级联样式，靠近您正在检查的元素。