css - 像在 Chrome 中执行 CSS 一样直播或控制台？

Question

我用谷歌搜索，但没有找到满意的答案。

有没有办法像在控制台中使用 JavaScript 一样在浏览器中实时执行 CSS 选择器？

我知道我可以在 Styles 痛苦中修改 CSS，但这似乎不允许我添加伪选择器，例如 :first-of-type。它似乎也没有显示所有受影响的标签或选择器返回的标签集。

有没有办法可以执行section.blah:first-of-type并查看返回或受影响的元素？

我现在只使用 Chrome，但可以使用 FF 或任何它给我这个功能的东西。

Answer 1

在元素选项卡中，您可以使用选择器语法进行搜索。

如果你搜索

.myclass

你会发现有 class="myclass" 的元素

我认为这是最接近您所要求的内容

转到元素选项卡，然后按 ctrl+F（查找）。在下面的示例中，输入 div.answer

在搜索字符串的右侧，您会看到“1 of 3”，表示 3 个元素符合您的条件。当前一个突出显示。您可以通过带有箭头的项目上下移动。

Answer 2

如果您在页面中使用 jQuery，那么您可以执行以下操作：

$("section.blah:first-of-type");

在浏览器控制台中执行该操作将显示 jquery 匹配的元素列表。

更好的是，您可以将它分配给一个变量并以编程方式遍历它。

Answer 3

实际上，您可以通过编辑样式窗格来做到这一点。你必须先选择一个父母（在我的例子中是html）。

结果是：

这样一来，chrome 就会瞬间大展身手。不仅仅是突出显示 DOM 树。