Strumenti per acquisire e convertire il Web

Utilizzo dei selettori CSS in GrabzIt

I selettori CSS vengono utilizzati nell'elemento target, nascondono l'elemento e attendono che le caratteristiche dell'elemento identifichino uno o più elementi HTML. I due principali tipi di selettori CSS sono selezionare per ID o classe. Un elemento HTML ha un id se contiene l'attributo id come mostrato di seguito.

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

Per selezionarlo crei un selettore CSS come #myidentifier

Se un elemento HTML ha una classe avrà l'attributo class come mostrato in questo esempio.

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

Per selezionarlo crei un selettore CSS come .myclass

Se si desidera selezionare un elemento particolare con la classe di myclass puoi usare un selettore CSS standard per farlo in questo caso il nth-child (2) selettore in questo modo: .myclass:nth-child(2) per selezionare il secondo intervallo myclass. Tuttavia, questo funzionerà solo in questo caso perché non ci sono altri elementi sotto l'elemento div padre. Se fosse presente un elemento ap, ad esempio, cambierebbe l'indice nth-child.

Seleziona un elemento HTML senza un ID o una classe univoci

A volte un elemento HTML che devi selezionare non ha un id o una classe che è univoca all'interno di una pagina. Quando si selezionano questi elementi HTML, è richiesto un selettore CSS più complicato.

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

Ad esempio, nell'esempio, sopra vogliamo selezionare l'elemento DIV all'interno del collegamento. Per fare ciò, dobbiamo specificare un selettore CSS che funzioni dal DIV univoco con l'estensione Header classe.

div.Header a div

I selettori CSS sono una caratteristica standard dello sviluppo web. Questo articolo fornisce una buona panoramica di come usare i selettori CSS.

Gestione di più elementi di corrispondenza

Se più elementi HTML vengono restituiti da un selettore CSS e si sta utilizzando l'elemento target o si attendono le funzionalità degli elementi, verrà utilizzato solo il primo elemento corrispondente. Tuttavia, se si utilizza la funzione Nascondi elemento, tutti gli elementi HTML corrispondenti verranno nascosti.

Se si desidera nascondere più elementi con ID o classi diversi, è possibile farlo separando ciascun selettore CSS con una virgola. Quindi, ad esempio, per nascondere la classe di esempio e l'id sopra, dovresti usare quanto segue #myidentifier,.myclass