Chrome浏览器在开发工具中复制CSS路径

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

Chrome CSS Path

来源

2013-03-12 MattDiamant

Possibily这就是答案 [Chrome浏览器copy csspath] [1] [1]：http://stackoverflow.com/questions/17292794/css-query-generation-apis/22344323#22344323 – chaosguru 2014-03-12 07:12:18

这给了它足够的路径，它是一个独特的元素，但我是更多地寻找整个CSS路径。虽然谢谢！ – MattDiamant 2014-03-13 20:18:34

正确答案：https://stackoverflow.com/a/35412554/242933 – ma11hew28 2018-01-13 14:14:18

对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-15 14:59:20

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

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

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

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

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

来源

2013-03-12 19:07:03 MattDiamant

我同意，这将是理想的能够复制它，因为它已经建成，并且他们还提供了复制xpath和html的能力来自同一个地方。为此需要扩展是非常愚蠢的。 – devlord 2013-08-07 18:51:16

“或者，我可以更好地学习Google”。我已经失去了数次搜索Google寻求编程相关问题的帮助的次数，只能找到类似“学习使用Google”这样的不重复的QA回复。谢谢你也包括一个有用的答案:) – 2013-12-10 19:53:20

这里是一个小（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个孩子“对于每个节点，如果你想获得类名，则需要修改它。

来源

2015-02-06 14:36:06 JussiR

真棒功能！ – kevinkl3 2016-08-06 01:53:02

您可以右键单击主源窗口中的元素和“复制CSS路径”。当我不得不在不能重新编码的页面上工作时，这已经是一种拯救生命。

来源

2015-04-16 20:19:44 Erik

这不是OP要求的。 – 2015-07-17 07:58:54

OP（我自己）正在寻找比“复制CSS路径”所提供的路径更长的路径（请参阅发布图像的底部） – BillyNair 2015-09-18 20:13:00

Chrome浏览器在开发工具中复制CSS路径

回答

相关问题