Chrome中的CSS执行实时或控制台？

Question

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

有没有办法在浏览器中实现CSS选择器，就像在控制台中使用JavaScript一样？

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

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

我现在只使用Chrome，但如果它能为我提供此功能，可以使用FF等等。

Answer 1

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

如果您搜索

.myclass

你会发现有class =“myclass”的元素

我认为这是你能得到的最接近的问题

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

在搜索字符串的右侧，您会看到“1/3”表示3个元素符合您的条件。当前的一个突出显示。你可以上去＆amp;通过带箭头的物品。

Answer 2

实际上，您只需通过编辑“样式”窗格即可。 您必须先选择父级（在我的情况下为html）。

结果是：

通过这种方式，chrome将立即显示所有感情。不只是突出显示DOM树。

Answer 3

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

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

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

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