如何在Chrome中获取CSS选择器？

Question

我希望能够选择/突出显示页面上的元素并找到它的选择器,如下所示:

div.firstRow div.priceAvail> div> div.PriceCompare> div.BodyS

我知道你可以在做一个检查元素后看到底部的选择,但是如何将这个路径复制到剪贴板？在Firebug中,我认为你可以做到这一点,但是没有办法使用Chrome开发者工具做到这一点,并且搜索扩展程序没有开启任何东西.

这是我想要做的更多参考:http: //asciicasts.com/episodes/173-screen-scraping-with-scrapi

Answer 1

如果您在源窗格中选择元素并右键单击Chrome Dev工具,则会看到"复制CSS路径"选项.

在较新版本的Chrome中,这是(right-click) > Copy > Copy selector.
您也可以使用XPath(right-click) > Copy > Copy XPath

Answer 2

虽然不是扩展,但我确实找到了一个名为Selector Gadget的书签,它完全符合我的要求.

Answer 3

我目前使用的工作流程来从具有最新Chrome版本(59)的元素中获取CSS选择器如下:

1. 打开Chrome开发工具(cmd/ctrl + alt + j):

2. 单击page(cmd/ctrl + alt + c)中的select元素工具:

3. 单击要从中获取选择器的元素,以便在开发工具面板中查看它:

4. 右键单击dev工具元素:

5. 单击复制 - >复制选择器:

这给了我以下内容:

#question > table > tbody > tr:nth-child(1) > td.postcell > div > div.post-text > blockquote > p

Answer 4

做“检查元素”或Ctrl+ Shift+I，它是在最底层的画面。如果不确定选择器，您也可以在开发工具右上角的“搜索元素”框中键入。