在Chrome中实时执行还是像控制台一样执行CSS？

我在谷歌上搜索过，但没有找到令人满意的答案

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

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

是否有一种方法可以执行

部分。blah:first of type

并查看返回的或受影响的元素

---

我现在只使用Chrome，但如果它提供了此功能，我可以使用FF或其他任何东西。

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

如果你搜索

.myclass

您将找到具有class=“myclass”的元素

我认为这是最接近你所要求的

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

---

在搜索字符串的右侧，您会看到“3中的1”，说明3个元素符合您的条件。当前的一个将突出显示。您可以使用箭头在项目中上下移动。

实际上，您只需编辑“样式”窗格即可。 您必须首先选择一个父对象（在我的例子中是html）

结果是：

---

这样，chrome将立即显示所有的情感。不仅仅突出显示DOM树。

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

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

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

---

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

您好，谢谢您的回答，但我不太明白。我如何搜索

.myclass

？@Nathanballey:vals说了什么。打开“元素”面板，按Ctrl+F键，在搜索字段中键入选择器（

.myclass

），然后按Enter键