在Chrome中使用實況或控制檯執行CSS操作？

Question

我已經使用Google，但沒有找到滿意的答案。

有沒有辦法像在控制檯中使用JavaScript一樣在瀏覽器中執行CSS選擇器？

我知道我可以修改樣式痛苦中的CSS，但是這似乎並沒有讓我添加諸如：first-of-type之類的僞選擇器。它也不會顯示所有受影響的標籤或由選擇器返回的標籤集。

有沒有辦法可以執行section.blah:first-of-type並查看返回或受影響的元素？

我現在只使用Chrome，但可以使用FF或其他功能，如果它給了我這個功能。

Answer 1

在元素選項卡中，您可以使用選擇器語法進行搜索。

如果你搜索

.myclass 

你會發現，有類=「MyClass的」元素

我認爲這是你可以得到你所要求的

最接近轉到元素標籤，然後按ctrl + F（查找）。在下面的例子中，輸入div.answer

到搜索字符串的右側，可以看到「1 3」指出，3種元素滿足您的條件。當前的一個突出顯示。你可以用箭頭向上走&。

Answer 2

實際上，只需通過編輯「樣式」窗格即可完成此操作。 你必須先選擇一個父母（在我的情況下是html）。

結果是：

這樣，Chrome會顯示所有的感情瞬間。不僅要突出顯示DOM樹。

Answer 3

如果您在頁面中使用jQuery，那麼你可以這樣做：

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

執行，在瀏覽器控制檯會告訴你，jQuery的匹配元素的列表。

更好的是，您可以將其分配給一個變量並以編程方式遍歷它。