谷歌浏览器CSS复制路径的开发工具(Google Chrome copy CSS Path in D

谷歌Chrome浏览器的开发者工具显示在工具栏底部的选择元素的CSS路径（或它的大部分）。 就在CSS的路径选择任何在Firebug，您可以单击鼠标右键，并抓住CSS路径达到该元素。 难道谷歌浏览器有这个功能吗？ 如果有什么工具可以没有内置支持？

Answer 1:

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:

你可以右键点击主源窗口的元素和“复制CSS路径”上。 这一直是保护程序时，我必须在我不能再代码页的工作生活。

Answer 3:

Chrome不具备，所以人们进行了Chrome扩展，书签工具和其他工具为Chrome复制此功能。

可能重复： Chrome浏览器Firefox的等效Firebug的CSS选择路径

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

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

我还是想别人的答案，建议，并提示如何使用这个最好的交易在Chrome中。

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 ' > '

用途“：第n个孩子”的每一个节点，所以你需要修改它，如果你想也得到类名。

文章来源: Google Chrome copy CSS Path in Developer Tools