32

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

Chrome CSS 路径

4

4 回答 4

24

Chrome 已更新此选项

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

于 2016-02-15T14:59:20.437 回答
5

Chrome 没有它，因此人们为 Chrome 制作了 chrome 扩展、书签和其他工具来复制此功能。

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

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

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

我仍然希望其他人就如何在 Chrome 中最好地处理这个问题提供答案、建议和提示。

于 2013-03-12T19:07:03.810 回答
4

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

于 2015-04-16T20:19:44.860 回答
2

这是一个小的 (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"，所以如果你想获得类名，你需要修改它。

于 2015-02-06T14:36:06.303 回答