Google Chrome在開發者工具中復制CSS路徑

Question

Google Chrome的開發人員工具會在工具欄底部顯示所選元素的CSS路徑（或其中很大一部分）。 在Firebug中，您可以右鍵單擊CSS路徑中的任何選擇器，並獲取該路徑的CSS路徑。 Google Chrome是否具有此功能？ 如果沒有內置支持，可以使用哪些工具？

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擴展，bookmarklet和其他工具來復制此功能。

可能重復： Chrome等效的Firefox Firebug CSS選擇路徑

Bookmarklet： http ： //www.selectorgadget.com/

Chrome擴展程序： https ： //chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

我仍然希望其他人的答案，建議和提示如何在Chrome中最好地處理這個問題。

Answer 3

您可以右鍵單擊主源窗口中的元素和“復制CSS路徑”。 當我必須處理無法重新編碼的頁面時，這可以節省生命。

Answer 4

這是一個小的（CoffeeScript）片段，它將提供CSS路徑（直到第一個id元素 - 盡管你可以通過刪除break部分輕松地改變它）：

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”，因此如果您想獲得類名，則需要修改它。