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

Question

Google Chrome的开发人员工具会在工具栏底部显示所选元素的CSS路径（或其中很大一部分）。在Firebug中，您可以右键单击CSS路径中的任何选择器，并获取该路径的CSS路径。 Google Chrome是否具有此功能？如果没有内置支持，可以使用哪些工具？

Answer 1

Chrome已更新此选项

在最近更新后的Chrome中，此选项已从
更改 (right click on the element in Elements Window) > Copy CSS path
至：
(right click on the element in Elements Window) > Copy > Copy selector

Answer 2

Chrome没有它，因此人们为Chrome提供了chrome扩展，bookmarklet和其他工具来复制此功能。

可能重复： Chrome equivalent of Firefox Firebug CSS select path

小书签： http://www.selectorgadget.com/

Chrome扩展程序： https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

我仍然希望其他人在Chrome中如何最好地处理此问题的答案，建议和提示。

Answer 3

您可以右键单击主源窗口中的元素和“复制CSS路径”。当我必须处理无法重新编码的页面时，这可以节省生命。

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”，所以如果你想获得类名，你需要修改它。