1. Zuhause
  2. Frage und Antwort
  3. Wie kann ich den CSS-Selektor in Chrome erhalten?

Wie kann ich den CSS-Selektor in Chrome erhalten?

2010-12-21 11 views
23

Ich möchte auf der Seite ein Element in der Lage sein zu wählen/markieren und seine Wähler wie diese finden:Wie kann ich den CSS-Selektor in Chrome erhalten?

div.firstRow div.priceAvail> div> div.PriceCompare> div.BodyS

Ich weiß, dass Sie die Auswahl nach einem inspect-Element unten sehen können, aber wie kann ich diesen Pfad in die Zwischenablage kopieren? In Firebug denke ich, dass Sie dies tun können, aber keine Möglichkeit sehen, dies mit den Chrome-Entwicklertools zu tun. Die Suche nach einer Erweiterung hat nichts ergeben.

Dies ist, was ich für mehr Referenz ich versuche zu tun: http://asciicasts.com/episodes/173-screen-scraping-with-scrapi

Quelle

2010-12-21 kale

Antwort

19

Obwohl keine Erweiterung, fand ich ein Bookmarklet namens Selector Gadget, das genau das tut, was ich suchte.

Quelle

2010-12-21 17:13:55 kale

+0

Sieht aus, als ob es jetzt auch eine Chrome-Erweiterung ist https://chrome.google.com/webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdbfginb –

2

Sie "Inspect Element" oder Ctrl + Umschalttaste + I, es ganz am unteren Rand des Bildschirms ist . Sie können auch das Feld "Suchelemente" oben rechts in den Entwicklungstools eingeben, wenn Sie sich nicht sicher sind, welchen Selektor Sie verwenden möchten.

Quelle

2010-12-21 15:03:42

+0

Sorry, I war nicht klar genug. Ich weiß, dass das auf der Unterseite ist, aber ich möchte eine Möglichkeit, es zu kopieren/einfügen (mit dem Selektor-Format), wie ich dies für eine Reihe von Elementen tun muss. – kale

+0

Leider bin ich mir nicht sicher, wie ich das machen soll. Nicht wirklich sicher, warum Sie das auch tun möchten, da Sie wahrscheinlich eine "Säuberung" auf den Selektor anwenden möchten, den Firebug/Chrome Ihnen geben wird. Z.B. Sie möchten nicht jeden Selektor in Ihrem CSS mit "html.body.div" starten, wenn Sie stattdessen einfach "div" sagen können. Entschuldigung kann nicht helfen. –

1

Es ist manchmal notwendig, dies zu tun, wenn Sie eine sehr komplexe App-Struktur haben, die Sie geerbt haben und versuchen, ein sehr kniffliges Multi-Nested-Css-Tiefe-Problem aufzuspüren. Jquery Mobile Pre 1.3 wäre dafür ein gutes Beispiel. Bootstrap apps etc ..

Ich versuchte das oben genannte Werkzeug, aber konnte nicht das, um tatsächlich die gesamte Elternteil und Kinder einer komplexen Vererbung ähnlich der ursprünglichen Poster Frage zu wählen.

Quelle

2013-12-03 19:42:48 imaginethepoet

16

Chrome Dev Tools CSS Path

Wenn Chrome Dev-Tools, wenn Sie das Element im Quellbereich und die rechten Maustaste auswählen, dann sehen Sie die "Copy CSS Path" Option.

Quelle

2015-05-21 18:36:56 CarlosCervantes

+8

Ich habe diese Option nicht in meinem Chrom –

+2

Es heißt jetzt Copy Selector – TomC

+1

'Rechtsklick> Kopieren > Auswahl kopieren in Chrome 61 – OscarRyz

3

Der Workflow I CSS-Selektoren von Elementen mit der neuesten Chrome-Version (59) zu erhalten, wie folgt zur Zeit folgen:

  1. öffnen Chrome Dev-Tool (cmd/ctrl + alt + j):

Step 1 - Opening Chrome Dev tools

  1. Klicken Sie auf das Element zum Auswählen von Elementen auf der Seite (cmd/ctrl + alt + c):

Step 2 - Clicking on the select element tool in page

  1. Klicken Sie auf das Element, das Sie den Wähler aus, um es in der Entwickler-Tools-Panel zu sehen bekommen:

Step 3 - Selecting the element

  1. Rechtsklick auf dem Entwickler-Tool Element:

Step 4 - Right clicking on the element

  1. Klicken Sie auf Copy -> Kopieren Wähler:

Step 5 - Copy selector

Welche mir folgendes gibt:

#question > table > tbody > tr:nth-child(1) > td.postcell > div > div.post-text > blockquote > p

Quelle

2017-07-13 10:40:06

Verwandte Themen

 Verwandte Themen