Strumenti per acquisire e convertire il Web

Utilizzo dei selettori CSS in GrabzIt

I selettori CSS vengono utilizzati nell'elemento di destinazione, nascondono l'elemento e attendono che le funzionalità dell'elemento identifichino uno o più elementi HTML. I due tipi principali di selettori CSS sono la selezione 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 volessi selezionare un particolare elemento con la classe di myclass puoi utilizzare un selettore CSS standard per farlo, in questo caso il ennesimo figlio(2) selettore in questo modo: .myclass:nth-child(2) per selezionare il secondo intervallo di myclass. Tuttavia funzionerà solo in questo caso perché non ci sono altri elementi sotto l'elemento div genitore. Se ci fosse un elemento ap, ad esempio, altererebbe l'indice n-th-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 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 il Header classe.

div.Header a div

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

Gestione di più elementi corrispondenti

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

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

Ottenere un selettore CSS dal browser

Puoi ottenere il selettore CSS dal browser Chrome in due semplici passaggi.

Fai clic con il tasto destro sulla parte della pagina web in cui ti trovi interested e fai clic Ispezione. Questo aprirà la finestra di ispezione.

Fare clic con il tasto destro sull'elemento nella finestra di ispezione fare clic Copia e quindi fare clic Selettore di copia.