javascript - 谷歌浏览器在开发者工具中复制 CSS 路径

Question

Google Chrome 的开发者工具在工具栏底部显示所选元素的 CSS 路径（或其中的大部分）。在 Firebug 中，您可以右键单击 CSS 路径中的任何选择器，然后将 CSS 路径抓取到该元素。谷歌浏览器有这个功能吗？如果没有内置支持，可以使用哪些工具？

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 扩展、书签和其他工具来复制此功能。

可能重复： Chrome 相当于 Firefox Firebug CSS 选择路径

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

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

我仍然希望其他人就如何在 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"，所以如果你想获得类名，你需要修改它。