html - 查找使用特定 css 选择器的所有元素

Question

尝试做一些前端设计工作，我需要对我的 css 做一些调试/测试。

我知道使用大多数浏览器开发工具，我可以单击一个元素并获得完整的样式跟踪。

但我想做的是相反的。

我知道选择器，我希望找到与之关联的所有元素（简单的 ctrl+f 不起作用）

我该怎么办？

Answer 1

您当然可以在普通的 Javascript 控制台中使用document.querySelectorAll.

因此，如果您想找到所有匹配的元素body div.heading h1，请执行

document.querySelectorAll('body div.heading h1');

浏览器控制台将显示它找到的元素。当您将鼠标悬停在控制台中的列表上时，大多数还会在页面中突出显示它们。