如何在 Chrome 中获取 CSS 选择器？
我希望能够选择/突出显示页面上的元素并找到其选择器，如下所示：
div.firstRow div.priceAvail>div>div.PriceCompare>div.BodyS
我知道您可以在执行检查元素后看到底部的选择，但如何将此路径复制到剪贴板？在 Firebug 中，我认为您可以做到这一点，但没有找到使用 Chrome 开发人员工具执行此操作的方法，并且搜索扩展程序没有找到任何内容。
这就是我试图做的，以供更多参考： http://asciicasts.com/episodes/173-screen-scraping-with-scrapi
I want to be able to select/highlight an element on the page and find its selector like this:
div.firstRow
div.priceAvail>div>div.PriceCompare>div.BodyS
I know you can see the selection on the bottom after doing an inspect element, but how can I copy this path to the clipboard? In Firebug I think you can do this, but don't see a way to do this using the Chrome Developer Tools and search for an extension did not turn-up anything.
This is what I am trying to do for more reference:
http://asciicasts.com/episodes/173-screen-scraping-with-scrapi
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
如果 Chrome Dev Tools 在源窗格中选择该元素并右键单击，那么您将看到“复制 CSS 路径”选项。
在较新版本的 Chrome 中，这是
（右键单击）>复制>复制选择器。您还可以通过
（右键单击）> 获取 XPath复制>复制 XPathIf Chrome Dev tools if you select the element in the source pane and right click, then you will see the "Copy CSS Path" option.
In newer versions of Chrome, this is
(right-click) > Copy > Copy selector.You can also get the XPath with
(right-click) > Copy > Copy XPath虽然不是扩展，但我确实找到了一个名为 Selector Gadget 的书签，它正是我正在寻找的东西。
Although not an extension, I did find a bookmarklet called Selector Gadget that does exactly what I was looking for.
我目前从最新 Chrome 版本 (59) 的元素获取 CSS 选择器的工作流程如下：
cmd/ctrl + alt + j):cmd/ctrl + alt + c）：这给了我以下内容：
#question >表>正文> tr:第 n 个子级(1) > td.postcell>分区> div.post-text>块引用>The workflow I currently follow to get CSS selectors from elements with the latest Chrome version (59) is as follows:
cmd/ctrl + alt + j):cmd/ctrl + alt + c):Which gives me the following:
#question > table > tbody > tr:nth-child(1) > td.postcell > div > div.post-text > blockquote > p执行“检查元素”或Ctrl+Shift+I，它位于屏幕的最底部。如果不确定选择器，您还可以在开发工具右上角的“搜索元素”框中键入。
Do "Inspect Element" or Ctrl+Shift+I, it's at the VERY bottom of the screen. You can also type in the "Search Elements" box at the top-right of the dev tools if not sure about the selector.
如果您继承了一个非常复杂的应用程序结构，并且试图追踪一个非常棘手的多重嵌套 CSS 深度问题，有时有必要执行此操作。 Jquery mobile pre 1.3 就是一个很好的例子。引导应用程序等。
我尝试了上述工具，但无法真正选择类似于原始海报问题的复杂继承的整个父级和子级。
It's sometime necessary to do this if you have a very complex app structure that you inherited and are trying to track down a very tricky multi nested css depth problem. Jquery mobile pre 1.3 would be a good example of this. Bootstrap apps etc..
I tried the above tool but could not get that to actually select the entire parent and children of a complex inheritance similar to the original posters question.