Como Encontrar Seletores CSS<\/h2>\n
Voc\u00ea s\u00f3 precisa de uma ferramenta e j\u00e1 a possui: um navegador!<\/p>\n
Cada navegador possui um conjunto de ferramentas<\/a> de desenvolvedor<\/a> que podem ser usadas para examinar um site. Usarei o Chrome<\/a>, mas voc\u00ea pode usar qualquer navegador moderno que desejar. Todos eles t\u00eam um conjunto de ferramentas extremamente semelhante.<\/p>\n Primeiro, abra sua p\u00e1gina inicial em uma nova guia.<\/p>\n Clique com o bot\u00e3o direito em qualquer lugar da p\u00e1gina e selecione a op\u00e7\u00e3o "Exibir c\u00f3digo-fonte". Isso abrir\u00e1 uma p\u00e1gina semelhante a esta em uma nova guia:<\/p>\n O c\u00f3digo-fonte de www.competethemes.com<\/p>\n Este \u00e9 o HTML bruto da p\u00e1gina da web. Isso \u00e9 o que o Google, seu navegador e qualquer outro software ver\u00e3o ao visitar seu site. \u00c9 o c\u00f3digo que seu navegador renderiza em um site com o qual voc\u00ea pode interagir.<\/p>\n \u00c9 importante entender que todas as p\u00e1ginas do seu site s\u00e3o feitas de HTML como este.<\/p>\n Embora seja legal ver o c\u00f3digo por tr\u00e1s do site, h\u00e1 uma maneira melhor e mais \u00fatil de visualiz\u00e1-lo.<\/p>\n Volte para a sua p\u00e1gina inicial, clique com o bot\u00e3o direito em qualquer parte da p\u00e1gina e, desta vez, selecione a op\u00e7\u00e3o “Inspecionar" (pode ser “Inspecionar Elemento”). Isso abrir\u00e1 as ferramentas de desenvolvedor do seu navegador, apresentando uma janela como esta:<\/p>\n Esta \u00e9 outra maneira de visualizar o mesmo HTML que voc\u00ea acabou de ver ao visualizar o c\u00f3digo-fonte. A diferen\u00e7a \u00e9 que agora temos uma hierarquia na qual podemos navegar e interagir.<\/p>\n Se tudo isso parece estranho e opressor, tudo bem. O objetivo aqui n\u00e3o \u00e9 dominar as ferramentas de desenvolvedor do seu navegador, mas encontrar um seletor CSS no site.<\/p>\n Em suas ferramentas de desenvolvedor, h\u00e1 um lado esquerdo e um lado direito. O lado esquerdo tem uma hierarquia do HTML que podemos navegar. Voc\u00ea pode ignorar o lado direito inteiramente.<\/p>\n Agora, se voc\u00ea passar o mouse sobre os elementos HTML nas ferramentas do desenvolvedor, notar\u00e1 algo muito legal. Cada elemento \u00e9 destacado na p\u00e1gina conforme voc\u00ea passa o mouse sobre ele.<\/p>\n Isso torna mais f\u00e1cil chegar ao elemento desejado. Na verdade, voc\u00ea realmente n\u00e3o precisa entender o HTML para encontrar o elemento que est\u00e1 procurando.<\/p>\n Existem duas maneiras de ir direto ao elemento que voc\u00ea precisa direcionar.<\/p>\n Digamos que eu precise acessar um link na minha pagina\u00e7\u00e3o. Posso clicar com o bot\u00e3o direito em algum lugar da p\u00e1gina e usar as setas suspensas para chegar ao link.<\/p>\n Cada vez que clico em uma seta, ela revela os elementos contidos naquele elemento. Isso geralmente \u00e9 necess\u00e1rio, mas o pr\u00f3ximo m\u00e9todo pode ser ainda mais f\u00e1cil e r\u00e1pido.<\/p>\n \u00c0s vezes, voc\u00ea pode selecionar o elemento exato que deseja. Para fazer isso, clique com o bot\u00e3o direito do mouse no elemento e as ferramentas do desenvolvedor abrir\u00e3o j\u00e1 destacando aquele elemento.<\/p>\n Veja como navegar para o mesmo link de pagina\u00e7\u00e3o com esse m\u00e9todo mais r\u00e1pido.<\/p>\n Depois de localizar o elemento HTML que est\u00e1 procurando, a \u00faltima etapa \u00e9 copiar o seletor CSS<\/a>.<\/p>\n Na captura de tela abaixo, voc\u00ea pode ver que estou passando o mouse sobre o link da p\u00e1gina dois.<\/p>\nVisualize o HTML do seu site<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-6170021ca44f7.png\")
<\/a><\/p>\nObtenha uma vis\u00e3o melhor do HTML<\/h3>\n
Navegue no HTML<\/h3>\n
M\u00e9todo 1: navegar usando as setas<\/h4>\n
M\u00e9todo 2: clique com o bot\u00e3o direito do mouse no elemento<\/h4>\n
Obtenha o seletor CSS<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-61700222c9d2d.png\")
<\/a><\/p>\n