Google Chrome开发者工具中如何复制CSS路径

Question

Google Chrome的开发者工具会在工具栏底部显示所选元素的CSS路径（或大部分内容）。在Firebug中，您可以右键单击CSS路径中的任何选择器，并抓取到该元素为止的CSS路径。Google Chrome是否有这个功能？如果没有内置支持，有哪些可用工具？

- MattDiamant

---

可能这就是答案。Chrome复制CSS路径 - chaosguru

那只提供了路径的足够信息，使其成为独特的元素，但我更倾向于获得整个CSS路径。不过还是谢谢！ - MattDiamant

正确答案：https://dev59.com/iGUp5IYBdhLWcg3wS2PP#35412554 - ma11hew28

Answer 1

Chrome已更新此选项

在最近的Chrome更新中，此选项已从
(在Elements窗口中右键单击元素) >复制CSS路径
更改为：
(在Elements窗口中右键单击元素) >复制 >复制选择器

- Ali Arslan

Answer 2

Chrome没有这个功能，所以人们制作了Chrome扩展程序、书签工具和其他工具来复制这个功能。

可能是重复的问题： Chrome中类似于Firefox Firebug CSS选择路径的工具 书签工具： http://www.selectorgadget.com/ Chrome扩展程序： https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi 我仍然希望其他人能提供答案、建议和关于如何在Chrome中最好处理这个问题的提示。

- MattDiamant

---

我同意，如果能够直接复制它就更理想了，因为它已经构建好了，而且它们还提供从同一位置复制xpath和html的功能。需要一个扩展程序来完成这个任务是相当愚蠢的。 - devlord

或者，我可以学会更好地使用谷歌。我已经不记得有多少次在Google上搜索解决编程问题的帮助，只是发现了像“学会使用Google”这样轻蔑的问答回复。感谢您也包括一个有用的答案 :) - Nick Carlson

Answer 3

您可以在主源窗口上右键单击元素并选择“复制CSS路径”。当我必须处理无法重新编码的页面时，这项功能是一个救星。

- Erik

---

这不是原帖所要求的。 - Nam G VU

OP（包括我）正在寻找比“复制CSS路径”提供的更长的路径（见发布的图像底部）。 - BillyNair

Answer 4

这是一个小的（CoffeeScript）代码片段，它将提供CSS路径（最多到第一个id元素 - 但您可以轻松删除断点部分更改它）：

getCSSPath = (node)->
  parts = []
  while node.parentElement
    str = node.tagName
    if node.id
      str += "##{node.id}"
      parts.unshift str
      break
    siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes)
    ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node)
    parts.unshift str + ":nth-child(#{ind + 1})"
    node = node.parentElement
  parts.join ' > '

在每个节点上使用“:nth-child”，因此如果您还想获取类名，需要修改它。

- JussiR