ESTÁ BEM.
Então, neste vídeo, vamos abordar dois tópicos importantes e veremos a avaliação
sobre a qual ainda não falamos e aqueles são herança e especificidade.
Então, para começar, vamos demonstrar a maneira como a herança funciona e ver avaliar.
Então eu tenho um arquivo simples aqui.
Ele tem um único poço com quatro aliados dentro e vou escrever meus estilos em uma etiqueta de estilo apenas para
tornar mais fácil para você assistir você não precisa me ver folhear entre arquivos.
Mas é sempre melhor fazer isso em uma folha de estilo externa.
Então eu vou desenhar o UL e dar uma cor de roxo e quando
eu fizer isso, você verá que quando eu atualizar os aliados realmente se tornam roxas.
Então, o que aconteceu lá.
Você sabia que eu denominava a área onde eles denominavam a UL e a
mentira mudou indiretamente e herdou essa cor do elemento pai.
Então, deixe-me mostrar-lhe outro exemplo disso.
Vamos adicionar apenas um parágrafo aqui,
ele começa de preto e eu vou vir e pregar isso, você será roxo por enquanto.
Então tudo é apenas texto preto normal.
Eu vou fazer isso um pouco maior se eu entrar no meu estilo e eu digo corpo e eu dou o
cor da cor vermelha e eu atualizo isso.
Você verá que tudo é vermelho.
Então, isso é apenas demonstrar esse conceito de herança onde, se estabelecemos uma propriedade em um pai também
pode afetar um elemento filho.
Então, é bom se queremos que todos os parágrafos e aliados sejam lidos.
Não precisamos sentar-se como parágrafos e transformá-los em ler e, em seguida, selecionar aliados e torná-los vermelhos.
Nós podemos apenas selecionar o corpo.
Então, a próxima coisa que eu quero mostrar é o que acontece se eu entrar aqui e então
eu decido que um parágrafo eu realmente quero que ele seja verde.
Se atualizarmos veremos, claro, que o parágrafo se tornou verde.
Da mesma forma, se eu quiser que o UL seja verde ou vamos fazer o azul e salvar e atualizar o UL fica azul e,
assim, os aliados porque eles herdam.
Então, o que está acontecendo aqui é realmente demonstrar essa idéia de especificidade e CSSA.
Então, temos vários estilos que podem afetar esse mesmo aliado.
Pode ser vermelho e começa como vermelho e depois retornando azul porque tudo o que você deveria
ser azul.
Então, se prosseguirmos e inspecionar um desses elementos e vou fazer isso em tela cheia e vou aumentar
isso e aumentar o tamanho da fonte um pouco também, você verá que a
cor está definida como azul vindo de uma UL e nos diz herdar da UL e se continuarmos a rolar, você verá
herdado do corpo.
A cor é vermelha, mas na verdade é cortada, e isso significa que não está sendo aplicado de forma alguma.
E, em vez disso, esse estilo está sendo aplicado.
Então, isso mostra-nos que este estilo está tentando ser aplicado ou está segmentando este elemento que selecionamos,
mas que é interrompido, o que significa que ele não está sendo aplicado.
Então, o próximo tópico que está muito relacionado à herança é chamado de especificidade.
Portanto, a especificidade é essa idéia no sentido de que podemos ter vários estilos visando um elemento e
isso está acontecendo aqui.
Temos vários estilos que visam este UL ou este aliado, por exemplo.
A mentira está ficando vermelha ou está sendo direcionada por esta linha.
Corpo girando tudo no corpo vermelho.
E também está sendo direcionada por esta linha que transforma todo no azul de Juelz.
E então o SS tem que decidir qual ganha.
E nesse caso, qualquer estilo seja o mais próximo desse elemento.
Então, qualquer um é mais específico e, portanto, o que isso significa é que o corpo é muito geral é tudo.
E uma UL é mais específica que quando vai ganhar.
Mas este é apenas um caso simples.
Então, agora vamos aumentar a ante e adicionar alguns outros seletores.
Então, vamos em frente e adicione um seletor de aliados direto e vamos fazer uma laranja aliada.
E, como seria de esperar, todos os aliados são laranja.
E se abrimos o inspetor, veremos que está sendo tornado vermelho pelo corpo, mas isso é interrompido.
Está sendo azulado pelo seletor UL e depois está sendo laranja pelo seletor da
mosca e aquele ganha.
Então, estes são casos simples em que é bem claro qual ganha.
Mas agora vamos apresentar algo em cima disso.
Vamos agora dizer que quero que isso tenha uma classe chamada destaque e eu
vou dar a dois deles e então eu selecionei este destaque de classe e dou uma cor de fundo.
Na verdade, vamos ficar com a cor.
Só assim é toda a mesma cor de propriedade de amarelo e eu economizo.
Qual você acha que vai ganhar agora?
Vamos verificar e você pode ver que a classe de destaque ganha e ficou amarela por causa
dessa classe alta.
Então, isso está nos mostrando algo em L. UMA. Estamos direcionando diretamente a todos os aliados
e tornando-os laranja e também estamos direcionando diretamente a alguns aliados que têm essa classe e tornando-os amarelos.
E neste caso, esta classe ganha.
Então, existem regras muito específicas sobre como isso funciona e eu vou mostrar isso em
apenas um segundo.
Mas antes disso, eu só quero adicionar mais um exemplo, então digamos também dar esse elemento a I. D. e eu vou
chamar isso de especial.
Eu vou direcionar esse elemento especial e eu vou dar uma cor de rosa e eu atualizo.
Você verá que esse elemento gera.
uma vez, se inspecionarmos, você verá que temos um estilo do corpo que não é aplicado um do poço que é herdado,
mas não aplicado um da mentira que não é aplicado um da classe que não é aplicado.
E mais
E, em seguida, um do ID especial que é aplicado.
Então, neste caso, o ID ganha.
Assim, como mencionei, existem regras muito específicas sobre como isso funciona.
E os escrevi aqui.
Mas na verdade eu vou para M. D e primeiro mostrar que eles têm um
excelente artigo sobre isso que eu recomendo que você leia e fala sobre como a especificidade é calculada.
Então, quando ela vê que há três ou quatro cores diferentes que este poderia ser.
Como sabe qual escolher.
E a forma como o faz realmente executa o cálculo para atribuir um valor
numérico a cada um desses seletores.
Então, vai atribuir um valor numérico a este aqui e depois a este e depois a este
e a este.
E, como sabemos, este ganha.
Então, da forma que está realmente calculado, não precisamos saber a matemática exata, mas vou
mostrar isso aqui.
Existe uma calculadora em que realmente podemos digitar coisas em linha que nos direm como
é específico.
Então, se eu selecionar todos os aliados, você verá que tem a especificidade de um.
Agora, vamos tentar saltar esse destaque da classe e isso é 10 vezes mais específico do que a especificidade de 10.
Então é por isso que uma classe 1 sobre a mentira.
E é por isso que este elemento é realmente amarelo, porque o destaque da classe ganhou sobre a
cor laranja.
Agora, se nós vamos e nós adicionamos um I. D.
ou o que chamamos de especial, você pode ver que é 100 vezes mais específico do que apenas a lei.
Então, aquele ganha e isso também bate na classe.
Portanto, a regra básica aqui é que os nomes de tag de seletores de elementos não são seletores de classes muito específicos são muito mais
específicos e, em seguida, as IDs são as mais específicas que você pode obter.
E também vou mostrar que não está limitado apenas a uma ID.
Então, digamos que queríamos saber o que é mais específico.
Eu tenho uma aula e outra classe dentro dela.
Então, esta é uma Selecta descendente, lembre-se de que esta é apenas uma especificidade de 20.
E se eu tiver um único eu. D. Essa é 100 especificidades.
Então, novamente, eu não quero que você pense que você precisa estar usando o site o tempo todo e calculando números.
Isso não é importante.
Tudo o que você precisa saber é a ordem das magnitudes para que eu vá às minhas anotações aqui
e que elas sejam escritas. Os seletores de tipos são os menos específicos.
Então, isso vai parecer algo assim ou aliado com um ATF dentro dele ou
mesmo o seletor adjacente.
Portanto, esses seletores não são muito específicos.
Mas mesmo dentro deste ano, isso será mais específico do que isso.
Isso também será mais específico do que isso, porque há dois elementos que estamos fazendo referência.
Então, se nós realmente calculamos isso, é especificidade de um.
E isso é dois.
Então o próximo nível é uma classe.
Então, esta será uma ordem de magnitude 10 vezes maior ou mais específica do que qualquer uma dessas.
E assim é o seletor de atributo.
como tipo de entrada, é igual a texto e, portanto, são esses seletores de pseudo-classe que são coisas como pairar.
Então, onde nós temos coisas
Então, uma tag em hover ou entrada que tenha sido verificada e outras coisas como essa que tenham esse cólon lá.
E então, o mais específico é o I. D. seletor.
E assim será outra ordem de grandeza maior ou mais específica do que os seletores aqui.