ChromeでCSSセレクターを取得するにはどうすればよいですか？
ページ上の要素を選択/強調表示して、次のようなセレクターを見つけたいと思います。
div.firstRow div.priceAvail> div> div.PriceCompare> div.BodyS
検査要素を実行すると、下部に選択範囲が表示されますが、このパスをクリップボードにコピーするにはどうすればよいですか？ Firebugではこれを行うことができると思いますが、Chrome Developer Toolsを使用してこれを行う方法が表示されず、拡張機能を検索しても何も見つかりませんでした。
これは私がもっと参考にするためにやろうとしていることです： http://asciicasts.com/episodes/173-screen-scraping-with-scrapi
拡張機能ではありませんが、 Selector Gadget というブックマークレットが見つかりました。これはまさに私が探していたものです。
Chrome Devツールの場合、ソースペインで要素を選択して右クリックすると、[CSSパスのコピー]オプションが表示されます。
Chromeの新しいバージョンでは、これは(right-click) > Copy > Copy selectorです。
XPathは(right-click) > Copy > Copy XPathでも取得できます
最新のChrome=バージョン（59）の要素からCSSセレクターを取得するために私が現在行っているワークフローは次のとおりです。
- Open Chrome Dev tools（_
cmd/ctrl + alt + j_）：
- ページの要素の選択ツールをクリックします（_
cmd/ctrl + alt + c_）：
- 開発ツールパネルでセレクターを表示するには、セレクターを取得する要素をクリックします。
- 開発ツール要素を右クリックします。
- [コピー]-> [コピーセレクタ]をクリックします。
それは私に次を与えます：
#question > table > tbody > tr:nth-child(1) > td.postcell > div > div.post-text > blockquote > p
「要素の検査」またはCtrl+Shift+I、画面の一番下にあります。セレクターが不明な場合は、開発ツールの右上にある「検索要素」ボックスに入力することもできます。
継承した非常に複雑なアプリ構造があり、非常にトリッキーな複数のネストされたcssの深さの問題を追跡しようとしている場合、これを行う必要がある場合があります。 Jquery mobile pre 1.3は、この良い例です。 Bootstrapアプリなど.
上記のツールを試してみましたが、元のポスターの質問に似た複雑な継承の親と子全体を実際に選択することはできませんでした。