我已经google了，但没有找到满意的答案。
有没有办法像在控制台中使用 JavaScript 一样在浏览器中实时执行 CSS 选择器？
我知道我可以在 Styles 的痛苦中修改 CSS，但这似乎不允许我添加伪选择器，例如 :first-of-type。它似乎也没有显示所有受影响的标签或选择器返回的标签集。
有没有办法可以执行section.blah:first-of-type 并查看返回或受影响的元素？
我现在只使用 Chrome，但可以使用 FF 或其他任何东西，如果它给了我这个功能。
【问题讨论】：
标签： css google-chrome-devtools
在元素选项卡中，您可以使用选择器语法进行搜索。
如果你搜索
.myclass
你会发现有 class="myclass" 的元素
我认为这是最接近您所要求的内容的方法
转到元素选项卡，然后按 ctrl+F（用于查找）。在下面的示例中，输入 div.answer
在搜索字符串的右侧，您会看到“1 of 3”，表示 3 个元素符合您的条件。当前一个突出显示。并且您可以通过带有箭头的项目上下移动。
【讨论】：
.myclass？
Ctrl+F，在搜索字段中输入您的选择器（.myclass），然后按Enter
如果您在页面中使用 jQuery，那么您可以这样做：
$("section.blah:first-of-type");
在浏览器控制台中执行该操作将显示 jquery 匹配的元素列表。
更好的是，您可以将它分配给一个变量并以编程方式遍历它。
【讨论】：
实际上，您可以通过编辑样式窗格来做到这一点。 您必须先选择父母（在我的情况下为 html）。
结果是：
这样一来，chrome 就会瞬间表现出所有的喜爱。不仅仅是突出显示 DOM 树。
【讨论】：