Google Chromeのデベロッパーツールでは、選択した要素のCSSパス(またはその大部分)がツールバーの下部に表示されます。 Firebugでは、CSSパス内の任意のセレクターを右クリックして、CSSパスをその要素まで取得できます。 Google Chromeこの機能はありますか?組み込みのサポートがない場合、どのツールを利用できますか?
Chromeがこのオプションを更新しました
chrome最近の更新後、このオプションは(right click on the element in Elements Window) > Copy CSS path
から:(right click on the element in Elements Window) > Copy > Copy selector
メインのソースウィンドウで要素を右クリックし、[CSSパスをコピー]をクリックします。再コーディングできないページで作業しなければならない場合、これは命の恩人でした。
Chromeにはないので、人々はchrome拡張機能、ブックマークレット、およびChromeのためのその他のツールを作成して、この機能を複製しています。
重複の可能性: Firefox Firebug CSS選択パスと同等のChrome
ブックマークレット: http://www.selectorgadget.com/
Chrome拡張機能: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi
Chromeでこれを適切に処理する方法について、他の人の回答、提案、およびヒントが欲しいのですが。
以下は、CSSパスを与える小さな(CoffeeScript)スニペットです(最初の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"を使用するため、クラス名も取得する場合は変更する必要があります。