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鏈接進行歸檔。