2016-05-24 4 views
4

Ich versuche, CSS-Selektoren besser zu verstehen und arbeite mit Google/Gmail herum. Wenn Sie auf die Google-Startseite gehen und "Google Mail" eingeben, werden Ihnen automatisch Suchergebnisse für diesen Begriff angezeigt. Ich möchte einen CSS-Selektor schreiben, der den ersten (also den Link zu Gmail, da er immer das erste Ergebnis sein sollte) findet. Der HTML-Code für diese Ergebnisse wie folgt aussieht:Verwenden von CSS-Selektoren zum Abrufen des ersten untergeordneten Elements aus einem verschachtelten Element

<div class="srg"> 
    <div class="g"> 
    <h3 class="r"> 
     <a href="https://mail.google.com/" onmousedown="return rwt(a bunch of stuff I omitted for brevity)">Gmail - Google</a> 

     ... 

Nach dem, was ich aus den W3schools CSS docs sammeln konnte, scheint es, wie ich das erste <a> Kind einer Klasse mit dem Namen r will, oder:

h3.r a:first-child 

jedoch , das Tool, das ich verwende, erkennt dies nicht als erster Link. Also frage ich: Ist das ein korrekter Selektor für den Gmail (ersten) Link, oder bin ich irgendwo schief gegangen?

+2

Welcher Browser und welches "Werkzeug" benutzen Sie? – JohannesB

+0

Geb, Browser-Automatisierung. Das habe ich absichtlich nicht in die Frage gestellt, weil ich zuerst einen schlechten CSS-Selektor ausschließen wollte (im Gegensatz zu einem Missbrauch oder Bug in Geb). Aus irgendeinem Grund mochte Geb die angenommene Antwort. – smeeb

+1

@smeeb: Selektor-Implementationen tun leider nicht sehr beständig, wenn sie der Spezifikation folgen (und dies gilt nicht nur für Browser-Automatisierungs-Tools, sondern auch für Browser selbst). Sie werden also feststellen müssen, dass Sie dies spezifizieren müssen das Werkzeug, das du fast immer benutzt. – BoltClock

Antwort

2

Nun, das Ankerelement, auf das Sie sich beziehen, ist das nur Kind des h3.r Elternteils.

So würden :first-child, :last-child und :only-child alle gelten.

enter image description here

Ein einfaches h3.r > a (Kindselektor) oder h3.r a (Nachkomme Wähler) sollte ausreichen, es ist einzigartig in dem Dokument übernehmen.

Ihr Selektor – h3.r a:first-child – sollte technisch gesehen auch funktionieren.

Basierend auf dem obigen Bild kann ein Attributselektor auch arbeiten:

h3.r a[data-href="https://mail.google.com/"] 

Weitere Informationen: https://www.w3.org/TR/css3-selectors/#selectors

0

Innerhalb Geb, Sie auch

`$ verwenden (" h3.r ") .find (" a ") [0]

, um das erste Kind auszuwählen.

Verwandte Themen