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

Question

我希望能够选择/突出显示页面上的元素并找到它的选择器：

  

div.firstRow   div.priceAvail＆GT; DIV＆GT; div.PriceCompare＆GT; div.BodyS

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

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

Answer 1

如果您在源窗格中选择元素并右键单击Chrome Dev工具，那么您将看到“复制CSS路径”选项。

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

获取XPath

Answer 2

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

Answer 3

我目前为了从具有最新Chrome版本（59）的元素中获取CSS选择器而遵循的工作流程如下：

1. 打开Chrome开发工具（cmd/ctrl + alt + j）：



1. 点击页面（cmd/ctrl + alt + c）中的选择元素工具：



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



1. 右键单击开发工具元素：



1. 点击复制 - ＆gt;复制选择器：



这给了我以下内容：

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

Answer 4

执行“检查元素”或 Ctrl + Shift + I ，它位于非常底部屏幕。如果不确定选择器，您还可以在开发工具的右上角键入“搜索元素”框。

Answer 5

如果您拥有一个非常复杂的应用程序结构，并且正在尝试跟踪一个非常棘手的多嵌套css深度问题，那么有时需要执行此操作。 Jquery mobile pre 1.3就是一个很好的例子。 Bootstrap应用程序等..

我尝试了上面的工具但却无法实际选择与原始海报问题类似的复杂继承的整个父级和子级。