将完整的 css 路径复制到字符串中答案

【问题标题】：Copy complete css path into string将完整的 css 路径复制到字符串中
【发布时间】：2014-11-05 19:49:15
【问题描述】：

我正在尝试在文档中深入获取元素的 css 树字符串。使用 Firebug 和 Chrome，我可以轻松获得选择器，但我需要完整路径。

原因是我需要根据一些页面的body类来修改一个WordPress主题。我知道这可能不是最佳实践，但如果你们中的某个人知道复制整个字符串的方法，我会非常高兴。

示例： body.page-id-362 > div#page.boxed > div#main.sidebar-none > div.wf-wrap > div.wf-container-main > div#content.content > div > div.vc_col-sm- 3.wpb_column.column_container

我要复制的内容更深，而且手写需要很长时间。

【问题讨论】：

你真的需要指定从正文到目标元素的每一个元素吗？页面中的 id 应该是唯一的，因此您的示例应该可以像 body.page-id-362 #content > div > div.vc_col-sm-3.wpb_column.column_container 一样正常工作。根据 HTML 的外观，您可能能够删除最接近的 id 和元素之间的大部分选择器。

标签： css string path copy

【解决方案1】：

Chrome （获胜者）

右键单击所需元素并单击检查元素
控制台弹出后，您会看到标签突出显示，
右键选择：复制CSS路径

问题最后一段的结果如下：

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

火狐

右键单击所需元素，单击检查元素。您应该会看到以下内容：

右击最后一个（所需的）标签元素，然后单击复制唯一选择器。
对你问题的最后一段这样做，它给了我：

.postcell > div:nth-child(1) > div:nth-child(1) > p:nth-child(4)

萤火虫

F12 很简单，检查所需的元素，然后：

右键[编辑]按钮后的第一个标签
复制 CSS 路径

I.E：我对你最后一个问题的段落做了这个，得到了这个：

CSS 路径：

html body.question-page.new-topbar div.container div#content div div#mainbar div#question.question table tbody tr td.postcell div div.post-text p

XPath

/html/body/div[5]/div[2]/div/div[2]/div[1]/table/tbody/tr[1]/td[2]/div/div[1]/p[4]

【讨论】：