Verwendung von CSS-Selektoren in GrabzIt

CSS-Selektoren werden im Zielelement verwendet, Elemente ausblenden und auf Elementfunktionen warten, um ein oder mehrere HTML-Elemente zu identifizieren. Die beiden Haupttypen von CSS-Selektoren sind die Auswahl nach ID oder Klasse. Ein HTML-Element hat eine ID, wenn es das unten gezeigte ID-Attribut enthält.

<span id="myidentifier">Example Text</span>

Um es auszuwählen, erstellen Sie einen CSS-Selektor wie #myidentifier

Wenn ein HTML-Element eine Klasse hat, hat es das Klassenattribut, wie in diesem Beispiel gezeigt.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

Um es auszuwählen, erstellen Sie einen CSS-Selektor wie .myclass

Wenn Sie ein bestimmtes Element mit der Klasse von auswählen möchten myclass In diesem Fall können Sie dazu einen Standard-CSS-Selektor verwenden n-tes Kind(2) Selektor wie folgt: .myclass:nth-child(2) um den zweiten Myclass-Bereich auszuwählen. Dies funktioniert jedoch nur in diesem Fall, da sich unter dem übergeordneten div-Element keine anderen Elemente befinden. Wenn es beispielsweise ein ap-Element gäbe, würde es den n-ten untergeordneten Index ändern.

Wählen Sie ein HTML-Element ohne eindeutige ID oder Klasse aus

Manchmal hat ein HTML-Element, das Sie auswählen müssen, keine ID oder Klasse, die innerhalb einer Seite eindeutig ist. Bei der Auswahl dieser HTML-Elemente ist ein komplizierterer CSS-Selektor erforderlich.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

Im obigen Beispiel möchten wir beispielsweise das DIV-Element innerhalb des Links auswählen. Dazu müssen wir einen CSS-Selektor angeben, der vom eindeutigen DIV mit dem arbeitet Header Klasse.

div.Header a div

CSS-Selektoren sind eine Standardfunktion der Webentwicklung. Dieser Artikel gibt einen guten Überblick darüber wie man CSS-Selektoren verwendet.

Umgang mit mehreren übereinstimmenden Elementen

Wenn mehrere HTML-Elemente von einem CSS-Selektor zurückgegeben werden und Sie das Zielelement verwenden oder auf Elementfunktionen warten, wird nur das erste passende Element verwendet. Wenn Sie jedoch die Funktion zum Ausblenden von Elementen verwenden, werden alle passenden HTML-Elemente ausgeblendet.

Wenn Sie mehrere Elemente mit unterschiedlichen IDs oder Klassen ausblenden möchten, können Sie dies tun, indem Sie die einzelnen CSS-Selektoren durch ein Komma trennen. Um beispielsweise die obige Beispielklasse und ID auszublenden, würden Sie Folgendes verwenden #myidentifier,.myclass