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

【问题标题】：How can I get the CSS Selector in Chrome?如何在 Chrome 中获取 CSS 选择器？
【发布时间】：2010-12-21 14:59:13
【问题描述】：

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

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

我知道您可以在执行检查元素后看到底部的选择，但是如何将此路径复制到剪贴板？在 Firebug 中，我认为您可以做到这一点，但没有看到使用 Chrome 开发人员工具执行此操作的方法，并且搜索扩展也没有出现任何结果。

【问题讨论】：

【解决方案1】：

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

在较新版本的 Chrome 中，这是(right-click) > Copy > Copy selector。
你也可以通过(right-click) > Copy > Copy XPath获取XPath

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

这给了我以下信息：

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

【讨论】：

【解决方案4】：

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

【讨论】：

对不起，我不够清楚。我知道它在底部，但我想要一种复制/粘贴它的方法（使用选择器格式），因为我需要对许多项目执行此操作。
不幸的是，我不确定如何做到这一点。也不确定为什么要这样做，因为您可能想对 Firebug/Chrome 提供给您的选择器应用一些“清理”。例如。您不想在 CSS 中的每个选择器都以“html.body.div”开头，而您可以只说“div”。抱歉帮不上忙。

【解决方案5】：

如果您继承了一个非常复杂的应用程序结构，并试图追踪一个非常棘手的多嵌套 css 深度问题，则有时需要这样做。 Jquery mobile pre 1.3 就是一个很好的例子。引导应用程序等。

我尝试了上述工具，但无法真正选择类似于原始海报问题的复杂继承的整个父级和子级。

【讨论】：