Neste vídeo, vamos examinar uma solução para o conjunto de problemas dos seletores CSSA.
E eu vou superar todos os problemas do topo.
Então, sinta-se livre para avançar rápido se houver apenas um ou dois que você teve problemas.
Então fizemos o primeiro juntos no vídeo inicial, damos ao elemento do corpo um plano de fundo dessa cor.
Então, nós apenas dizemos que o fundo do corpo é essa cor para nós.
Vamos continuar e carregá-lo na atualização do navegador e você pode ver um fundo cinza.
Então, o próximo é tornar o elemento H dessa cor.
Da mesma forma, exceto em um plano de fundo que acabamos de dizer colorido.
Nós salvamos as propriedades ou H-1 torna-se roxo.
Lembre-se se tivéssemos mais de um H-1 na página, todos seriam roxos.
Então, este próximo é tornar todos os elementos H-2 laranja.
Exatamente o mesmo seletor do que os dois acima.
E, em seguida, para torná-lo laranja eu vou apenas usar a cor laranja embutida, mas você pode usar qualquer
outro sistema de cores e você pode ver todas as idades para esses quatro.
Eles ficam laranja.
Então, em seguida, vamos mudar isso para o lado, crie todos os elementos aliados em azul.
Escolha o seu próprio azul hexadecimal.
Então, para fazer isso, selecionamos todos os aliados e depois lhes damos uma cor e vamos fazer um
azul hexadecimal.
Então você poderia colocar qualquer coisa aqui, desde que seja mais azul do que qualquer outra coisa.
Então lembre-se que o primeiro canal está vermelho, então os dois próximos são verdes.
Então, vamos fazer um pouco de verde, vamos fazer e depois um monte de azul.
Salve isso e vamos dar uma olhada nos Aliados e você pode ver que nós temos luzes azuis.
Então, altere o plano de fundo em cada parágrafo para ser amarelo.
É apenas mais um lugar onde selecionamos cada elemento de um tipo.
Então, todos os parágrafos de fundo amarelo salvam e nós conseguimos um monte de parágrafos amarelos.
Em seguida, selecione todas as entradas e dê-lhes uma borda vermelha de três pixels.
Então, entrada fronteira e há algumas maneiras de fazer isso, podemos fazer tudo de uma vez.
Peça três pixels de vermelho
sólido e você pode ver nossas duas entradas ter um prefixo ou uma borda vermelha
sólida ou podemos fazer
isso com a borda separada de cor vermelha com três pixels e, finalmente, o estilo de borda é sólido por motivos bastante óbvios.
É muito mais fácil fazer isso.
Mas, ocasionalmente, você vai querer fazer isso quando chegar ao javascript.
Queremos apenas atualizar uma parte.
Então, quando um usuário paira sobre algo que deseja mudar de uma borda vermelha para uma borda verde.
Bem, podemos querer mudar a cor e podemos deixar o estilo com a forma como estão.
Então vou deixá-lo assim.
Em seguida, estamos passando para o seletor de classe.
Então, dê tudo com a classe Olá.
Um fundo branco.
E se olharmos para o h t m l, na verdade, há apenas uma coisa.
Este primeiro parágrafo dentro desta div com a classe.
Olá.
Então selecionamos esse ponto de classe.
Olá fundo branco.
E você pode ver este parágrafo aqui.
Vira branco.
Em seguida, dê ao elemento com ID especial uma borda azul sólida de dois pixels.
Escolha o seu próprio R. G. seja azul.
Então, a mesma coisa novamente desta vez em vez de um ponto, usamos o sinal de hash ou o arco para Thorpe
e, em seguida, o nome da identificação que ela pode ver novamente é exatamente o Id especial.
E então, queremos dar uma largura sólida de dois pixels para pixel sólido e depois R. G. seja azul.
E assim teremos 0 vermelho 100 verde 200 de azul e se estivéssemos frescos que você pode ver, ficamos muito leve, mas
uma borda azul de 2 pixels em torno deste parágrafo com o ID.
da fonte divs 25 pixel e a dica é usar esta fonte de propriedade tamanho Dasch 25 pixels.
Em seguida, crie todos os parágrafos que estão aninhados dentro
Então, o que precisamos fazer aqui é em vez de selecionar todos os parágrafos, só queremos parágrafos que estejam
dentro de uma div para que você possa ver que existem alguns como este aqui que não está dentro de uma div.
Nós não queremos que esses sejam 25 pixels no tamanho da fonte.
e, então, dentro dessa div todos os parágrafos, então os parágrafos que vivem em qualquer div não importa quais div
apenas os parágrafos em qualquer divs os selecionam e dê-lhes tamanho da fonte 25 pixels salvo que atualizem
e você pode ver que todos eles ficam maiores, mas esses que dizem que o parágrafo não está dentro de uma div não aumentam porque eles não são
em vez de uma div. Em seguida, faça apenas as entradas com o tipo de texto tiverem um fundo cinza.
Então, usamos esse seletor de descendentes onde dizemos div
Então, este é outro tipo de seletor e é baseado em um atributo.
Então, o atributo que você deseja fazer é encontrar onde o tipo é igual ao texto.
Então, basicamente, essa entrada aqui é o tipo de texto.
E assim, da maneira que fazemos, vamos digitar a entrada e, em seguida, chaves trançadas e agulhas quadradas.
E então dentro de lá o atributo que é tipo e estamos procurando por onde é
igual a texto e então vamos apenas dizer cinza de fundo.
E então, se deslocarmos para baixo aqui e atualizar, mantenha o seu olho aqui mesmo, você pode ver um fundo cinza.
Então, novamente, este é útil se você quiser que ele selecione todos os links que foram para o Google.
Nós escolheríamos com base em H. F. ou podemos selecionar fora de qualquer outro atributo lá fora.
Então, em seguida, dê a ambos os parágrafos dentro do terceiro div um fundo rosa.
Então, este fica um pouco louco.
Então, vamos dar uma olhada no HMO.
Aqui está a nossa terceira div. O primeiro está aqui.
O segundo está aqui e
o terceiro está aqui e há dois parágrafos e queremos selecioná-los e dar-lhes um fundo rosa.
Então, o que fizemos anteriormente foi selecionar todos os parágrafos dentro de todos os divs que não funcionarão aqui.
O que fazemos o que queremos fazer é selecionar todos os parágrafos dentro da terceira div na página.
E a maneira como podemos especificar a terceira div é usar o fim do tipo.
Então, diremos div e do tipo 3.
Então, isso vai nos dar uma terceira div e, em vez disso, todos os parágrafos e
então vamos dizer que o fundo é rosa e economize a atualização e vamos verificar novamente.
Aqui está a nossa primeira div.
Aqui está a segunda div.
E aqui está a terceira div.
Comece a começar o parágrafo com cardigan e eu sou o segundo parágrafo.
Lá vamos um cardigan.
Eu sou o segundo parágrafo.
Em seguida, dê este segundo parágrafo dentro da terceira div uma borda branca de cinco pixel.
Então, este é muito similar, exceto que só queremos o segundo parágrafo dentro da terceira div.
Então, apenas este.
parágrafo e do tipo.
Então, fazemos a mesma coisa em que selecionamos a terceira div e do tipo 3 e, em vez de todos os parágrafos, então vamos fazer o
E queremos o segundo para que possamos combiná-los.
Isso vai selecionar o segundo parágrafo em vez da
terceira div e queremos dar-lhe uma beira branca de 5 pixel com 5 pixels de branco sólido.
Aqui vamos nós.
Aqui está o nosso limite de cinco pixels branco sólido no segundo parágrafo na div.
Não é o primeiro.
Em seguida, faça o E-M no terceiro elemento div branco e fonte de 20 pixels.
Então, esse é o E-M aqui mesmo skate de cronut.
Se você não conhece Krown, é muito gostoso.
Talvez sobrevalorizado.
Sobremesa definitivamente decadente da cidade de Nova York.
Tem uma rosquinha e um croissant.
Então, definitivamente em casa em vez do vocabulário ipsum hipster aqui.
E nós vamos pegar esse E-M e nós vamos torná-lo branco e 20 pixels Swan.
o terceiro div 3 e, em seguida, apenas o E-M dentro.
Então, como antes, tivemos que
selecionar
E isso irá selecionar todos os IEMs e só acontece que há apenas um.
Mas se houvesse mais de um, poderíamos querer dizer
E-M primeiro do tipo ou E-M ao invés de um parágrafo, mas deixarei isso assim por agora.
E queremos dar a cor branca e cor de fonte de 20 pixels e tamanho da fonte 20 pixels.
E apenas para lembrá-lo, vamos passar tempo falando sobre fontes e tamanho de fonte e
um monte de outras coisas em futuros vídeos.
Aqui vamos nós.
É branco e o tamanho da fonte muda.
Então, agora estamos em alguns dos exercícios de bônus que são alguns dos meus favoritos.
Há algumas das mais obscuras formas mais interessantes de selecionar coisas e manipulá-las.
Então, para começar.
Vejamos que todas as caixas de seleção marcadas têm uma margem esquerda de 50 pixels e eu dei a você.
Você precisa usar a margem esquerda para 50 pixels.
Portanto, há um seletor para selecionar os elementos que estão marcados.
E isso simplesmente parece assim.
É um pseudo seletor exatamente como o n. ° do tipo.
Então, precisamos dizer o que estamos procurando que tenha sido verificado.
Então, vou dizer todas as entradas que foram verificadas porque lembre-se que
as caixas de seleção são caixa de seleção de tipo de entrada, existem outros elementos que podem ser verificados, principalmente pelo botão de rádio.
Então, isso também selecionaria os botões de rádio que foram verificados e que está bem por enquanto.
Então, parece que esta entrada foi verificada no cólon.
E o que queremos fazer é usar margem esquerda de cinquenta pixels.
Então, esta é uma pequena prévia do que estamos vendo em alguns
dos futuros vídeos quando adicionamos isso e vai adicionar algum espaço no lado esquerdo
da caixa de seleção para que você possa ver os que foram verificados mudados.
Agora, se eu verificar este agora, isso é verificado e ele se desloca para os 50 pixels certos.
Se eu desmarcá-los e voltar para a esquerda.
Então está marcado.
O proximo.
Este é provavelmente o meu favorito.
Faça os elementos do rótulo em letras maiúsculas sem alterar o HMO.
Então, eu mencionei que você definitivamente quer dar uma olhada
em um e isso é porque definitivamente não passamos por isso.
Então, para começar, vamos
selecionar todos os elementos do rótulo e depois digamos que não sei como fazê-los maiúsculas sem alterar o HMO.
Então, vamos puxar o Google e fazer uma pesquisa e isso é algo que eu definitivamente fiz antes.
Então, vamos subir e fazer uma pesquisa, ver avaliar maiúsculas e minúsculas, você pode
ver a primeira coisa que aparece é transformação de texto e a transformação de texto diz que ele especifica como capitalizar em texto de elementos.
Ele pode ser usado para que o texto apareça em todas as maiúsculas ou minúsculas ou com cada palavra maiúscula.
Então, nos deslocamos para baixo e damos uma olhada na sintaxe e parece que nós capitalizamos.
Será a maiúscula e minúscula da maiúscula.
Então, queremos maiúsculas.
Então o texto transforma-se em maiúsculas.
E o que acabei de fazer não foi apenas para mostrar-lhe
algo é realmente algo que eu faço o tempo todo, o que está procurando coisas
indo para o Google digitando C Ss blá blá blá CSSA maiúsculas e minúsculas C S S transparente o que eu estou olhando para fazer.
E eu apenas olho para os resultados da pesquisa porque existem muitas propriedades para se lembrar.
Você não pode se lembrar de todos eles.
Então, este é um dos mais obscuros.
Definitivamente.
E se atualizarmos isso é para rótulos que estão aqui embaixo.
Então, deixe-me apenas me livrar disso apenas para mostrar o nosso tempo.
Estes são os rótulos.
E, em seguida, adicionamos isso e atualizamos seu invólucro superior.
Então, em seguida, fizemos a primeira letra do elemento com ID verde especial e tamanho de fonte de 100 pixels.
Então, para atacar a primeira carta que é outra, podemos querer procurar
a primeira carta de SEUS e ver o que recebemos.
Então, parece que há outro pseudo seletor.
A primeira letra C Ss elemento seleciona a primeira letra da primeira linha de um bloco.
Então, se você dar uma olhada na primeira letra do exemplo.
Vamos em frente e tente isso.
Queremos primeiro selecionar o ID especial e, em seguida, primeiro a letra dele.
E queremos torná-lo verde e 100 pixels em tamanho de fonte, de
modo que a cor verde e o tamanho da fonte 100 pixels sejam salvos e esse elemento está bem aqui.
Portanto, fique atento à primeira carta que atualizamos e obtemos este gigantesco olho verde.
Em seguida, a cor dos elementos H-1 é alterada para o azul quando se deslocou.
Então, este é bastante comum ter algum tipo de efeito.
Quando você passa o mouse sobre algo, geralmente é bastante sutil, talvez seja um botão
e você passa por cima dele e há uma pequena sombra que parece que a cor muda muito ligeiramente para parecer que
você conhece algum tipo de perspectiva 3-D para algo que lhe dê apenas um pouco pouco de interatividade sem distração distraída.
Então, vamos selecionar o H-1 e isso é realmente tudo a cada um.
Mas, neste caso, é apenas um e o pseudo seletor passa
e tudo o que colocamos aqui é aplicado somente quando um usuário paira sobre o elemento.
Então cor azul, economizamos.
Aqui está o nosso H-1.
E se eu deslizar para o azul quando eu parar de girar, ele volta ao que tinha antes.
Então, finalmente, faça os elementos que foram vistos em cinza e, como ele pode ver
os dois elementos, esses dois links realmente ligam para o Facebook, links que eu já visitei.
É por isso que eles são roxos, o Chrome, por padrão, fará com que todos os visitados pensem em roxo.
Então, coloquemos um link que eu definitivamente não estive antes e isso só vai fazer algo
para começar e eu vou mostrar que você atualiza a página.
Agora é azul.
Porque não estive lá.
Então, deixe-o assim por agora, não vou clicar nele.
E queremos que os visitados sejam mais roxos do que.
Desculpe, queremos que o visitado seja uma vez cinza e não púrpura.
Então, selecionamos as tags dos pseudo-seletores chamados visitados e, então, vamos economizar.
E se atualizarmos.
Fique de olho neste aqui.
Eu tornarei a fonte um pouco maior.
Atualmente, é roxo porque já estive lá antes de atualizar.
Agora é ótimo.
Ok então, espero que tenha gostado desse exercício.
Há muito para desempacotar lá.
Muitos seletores diferentes.
E uma coisa que vou acrescentar é
que, para todas as soluções que tenho ou quase todas, há pelo menos uma ou duas maneiras de alcançar exatamente o mesmo resultado.
Então, se você tivesse algo que diferisse de mim, mas ainda funcionou, isso é ótimo.
Não hesite em adicionar os comentários.
Compartilhe isso com outras pessoas.
É totalmente válido.
Esta é exatamente a maneira que eu teria feito isso.
Uma outra coisa.
Obviamente, o site não é particularmente atraente.
Este não é um site real.
Nós estaremos trabalhando em um projeto real muito em breve no próximo vídeo de exercícios.
Na verdade, vamos fazer um pequeno site de blog projetado um pouco melhor.
Parece muito mais agradável do que isso.
Isto é mais apenas um exercício de prática.