Google Chrome 在开发者工具中复制 CSS 路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15369895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Chrome copy CSS Path in Developer Tools
提问by MattDiamant
Google Chrome's Developer Tools shows the CSS path (or a large portion of it) of the selected element at the bottom of the toolbar. In Firebug, you are able to right-click on any selector in the the CSS Path, and grab the CSS Path up to that element. Does Google Chrome have this feature? What tools are available if there is no built-in support?
Google Chrome 的开发者工具会在工具栏底部显示所选元素的 CSS 路径（或其中的大部分）。在 Firebug 中，您可以右键单击 CSS 路径中的任何选择器，然后将 CSS 路径抓取到该元素。谷歌浏览器有这个功能吗？如果没有内置支持，可以使用哪些工具？
采纳答案by Ali Arslan
Chrome has updated this option
Chrome 已更新此选项
In chrome after recent update this option has been changed from(right click on the element in Elements Window) > Copy CSS path
to :(right click on the element in Elements Window) > Copy > Copy selector
在最近更新后的 chrome 中，此选项已从更改(right click on the element in Elements Window) > Copy CSS path
为：(right click on the element in Elements Window) > Copy > Copy selector
回答by Erik
You can right click on the element in the main source window and "Copy CSS path". This has been a life saver when I have to work on pages that I can't re-code.
您可以右键单击主源窗口中的元素并“复制 CSS 路径”。当我必须在无法重新编码的页面上工作时，这是一个救命稻草。
回答by MattDiamant
Chrome doesn't have it, so people have made chrome extensions, bookmarklets, and other tools for Chrome to replicate this functionality.
Chrome 没有它，因此人们制作了 chrome 扩展程序、书签和其他工具，以便 Chrome 复制此功能。
Possible duplicate: Chrome equivalent of Firefox Firebug CSS select path
可能重复： Chrome 等效于 Firefox Firebug CSS 选择路径
Bookmarklet: http://www.selectorgadget.com/
书签：http: //www.selectorgadget.com/
Chrome Extension: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi
Chrome 扩展程序：https: //chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi
I would still like other people's answers, suggestions, and tips on how to best deal with this in Chrome.
我仍然希望其他人提供有关如何在 Chrome 中最好地处理此问题的答案、建议和提示。
回答by JussiR
Here is a small (CoffeeScript) snippet that will give CSS path (up to first id element - though you can easily change that by removing the break part):
这是一个小的 (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 ' > '
Uses ":nth-child" for every node, so you need to modify it if you'd like to get also class names.
对每个节点使用 ":nth-child"，因此如果您还想获得类名，则需要修改它。
