如何快速判斷某個頁面上正在使用的CSS文件的哪些部分？

Question

我有一個應用於多個頁面的大規模CSS文件。我希望把它分解成一個普通的CSS文件和幾個頁面級的CSS文件，因爲它變得很難處理。不幸的是，要分辨究竟是什麼共同點並不容易。我希望有一種方法可以快速查看給定頁面上正在使用的行/選擇器。有誰知道可以做到這一點的工具嗎？我不想使用開發人員工具並逐個瀏覽DOM元素。我想看看CSS文件，並看到未使用的選擇器變灰或什麼的。謝謝！

Answer 1

您至少可以在Chrome中使用開發人員工具中的Audits選項卡。一旦你運行它，它就會說你在當前頁面中沒有使用哪些樣式。

測試在這個網站上：

Answer 2

而且對Firefox有一個附加的所謂CSS Usage - 可能是值得一試了。