Ferramentas para capturar e converter a Web

Usando seletores de CSS no GrabzIt

Os seletores CSS são usados ​​no elemento de destino, ocultam o elemento e aguardam que os recursos do elemento identifiquem um ou mais elementos HTML. Os dois principais tipos de seletores CSS são selecionar por id ou classe. Um elemento HTML possui um id se contiver o atributo id conforme mostrado abaixo.

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

Para selecioná-lo você cria um seletor CSS como #myidentifier

Se um elemento HTML tiver uma classe, ele terá o atributo class conforme mostrado neste exemplo.

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

Para selecioná-lo você cria um seletor CSS como .myclass

Se você quisesse selecionar um elemento específico com a classe de myclass você pode usar seletores CSS padrão para fazer isso, neste caso o n-ésimo filho(2) seletor da seguinte forma: .myclass:nth-child(2) para selecionar o segundo intervalo myclass. No entanto, isso só funcionará neste caso porque não há outros elementos sob o elemento pai div. Se houvesse um elemento ap, por exemplo, ele alteraria o índice enésimo filho.

Selecione um elemento HTML sem um ID ou classe exclusivo

Às vezes, um elemento HTML que você precisa selecionar não possui um ID ou classe exclusivo em uma página. Ao selecionar esses elementos HTML, é necessário um seletor CSS mais complicado.

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

Por exemplo, no exemplo acima queremos selecionar o elemento DIV dentro do link. Para fazer isso, precisamos especificar um seletor CSS que funcione a partir do DIV exclusivo com o Header classe.

div.Header a div

Os seletores CSS são um recurso padrão do desenvolvimento web. Este artigo fornece uma boa visão geral como usar seletores CSS.

Lidando com vários elementos correspondentes

Se vários elementos HTML forem retornados de um seletor CSS e você estiver usando o elemento de destino ou aguardando os recursos do elemento, apenas o primeiro elemento correspondente será usado. No entanto, se você estiver usando o recurso ocultar elemento, todos os elementos HTML correspondentes ficarão ocultos.

Se você quiser ocultar vários elementos com IDs ou classes diferentes, poderá fazê-lo separando cada seletor CSS com uma vírgula. Então, por exemplo, para ocultar a classe e o ID de exemplo acima, você usaria o seguinte #myidentifier,.myclass

Obtendo um seletor CSS do navegador

Você pode obter o seletor CSS do navegador Chrome em duas etapas simples.

Clique com o botão direito na parte da página da web que você está intentre e clique Inspecionar. Isso abrirá a janela do inspetor.

Clique com o botão direito no elemento na janela do inspetor, clique Copiar e clique em Seletor de cópia.