1
00:00:00,970 --> 00:00:01,550
ESTÁ BEM.

2
00:00:01,590 --> 00:00:06,090
Então, neste vídeo, vamos abordar dois tópicos importantes e veremos a avaliação

3
00:00:06,090 --> 00:00:10,650
sobre a qual ainda não falamos e aqueles são herança e especificidade.

4
00:00:10,650 --> 00:00:15,670
Então, para começar, vamos demonstrar a maneira como a herança funciona e ver avaliar.

5
00:00:15,690 --> 00:00:17,730
Então eu tenho um arquivo simples aqui.

6
00:00:18,000 --> 00:00:25,200
Ele tem um único poço com quatro aliados dentro e vou escrever meus estilos em uma etiqueta de estilo apenas para

7
00:00:25,200 --> 00:00:30,050
tornar mais fácil para você assistir você não precisa me ver folhear entre arquivos.

8
00:00:30,210 --> 00:00:33,800
Mas é sempre melhor fazer isso em uma folha de estilo externa.

9
00:00:34,560 --> 00:00:41,070
Então eu vou desenhar o UL e dar uma cor de roxo e quando

10
00:00:44,580 --> 00:00:51,250
eu fizer isso, você verá que quando eu atualizar os aliados realmente se tornam roxas.

11
00:00:51,270 --> 00:00:52,570
Então, o que aconteceu lá.

12
00:00:52,620 --> 00:00:57,990
Você sabia que eu denominava a área onde eles denominavam a UL e a

13
00:00:57,990 --> 00:01:01,730
mentira mudou indiretamente e herdou essa cor do elemento pai.

14
00:01:01,830 --> 00:01:04,350
Então, deixe-me mostrar-lhe outro exemplo disso.

15
00:01:05,370 --> 00:01:07,410
Vamos adicionar apenas um parágrafo aqui,

16
00:01:10,850 --> 00:01:15,890
ele começa de preto e eu vou vir e pregar isso, você será roxo por enquanto.

17
00:01:15,900 --> 00:01:18,010
Então tudo é apenas texto preto normal.

18
00:01:18,010 --> 00:01:25,920
Eu vou fazer isso um pouco maior se eu entrar no meu estilo e eu digo corpo e eu dou o

19
00:01:26,010 --> 00:01:28,980
cor da cor vermelha e eu atualizo isso.

20
00:01:29,250 --> 00:01:31,370
Você verá que tudo é vermelho.

21
00:01:32,040 --> 00:01:38,850
Então, isso é apenas demonstrar esse conceito de herança onde, se estabelecemos uma propriedade em um pai também

22
00:01:38,850 --> 00:01:40,720
pode afetar um elemento filho.

23
00:01:40,920 --> 00:01:46,310
Então, é bom se queremos que todos os parágrafos e aliados sejam lidos.

24
00:01:46,350 --> 00:01:50,540
Não precisamos sentar-se como parágrafos e transformá-los em ler e, em seguida, selecionar aliados e torná-los vermelhos.

25
00:01:50,580 --> 00:01:52,690
Nós podemos apenas selecionar o corpo.

26
00:01:53,490 --> 00:02:00,840
Então, a próxima coisa que eu quero mostrar é o que acontece se eu entrar aqui e então

27
00:02:01,320 --> 00:02:05,980
eu decido que um parágrafo eu realmente quero que ele seja verde.

28
00:02:08,670 --> 00:02:12,630
Se atualizarmos veremos, claro, que o parágrafo se tornou verde.

29
00:02:12,630 --> 00:02:22,350
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,

30
00:02:22,350 --> 00:02:24,830
assim, os aliados porque eles herdam.

31
00:02:25,170 --> 00:02:31,040
Então, o que está acontecendo aqui é realmente demonstrar essa idéia de especificidade e CSSA.

32
00:02:31,680 --> 00:02:36,530
Então, temos vários estilos que podem afetar esse mesmo aliado.

33
00:02:36,690 --> 00:02:43,410
Pode ser vermelho e começa como vermelho e depois retornando azul porque tudo o que você deveria

34
00:02:43,410 --> 00:02:44,220
ser azul.

35
00:02:44,700 --> 00:02:52,410
Então, se prosseguirmos e inspecionar um desses elementos e vou fazer isso em tela cheia e vou aumentar

36
00:02:52,410 --> 00:02:58,350
isso e aumentar o tamanho da fonte um pouco também, você verá que a

37
00:02:58,830 --> 00:03:08,190
cor está definida como azul vindo de uma UL e nos diz herdar da UL e se continuarmos a rolar, você verá

38
00:03:08,190 --> 00:03:09,180
herdado do corpo.

39
00:03:09,300 --> 00:03:15,630
A cor é vermelha, mas na verdade é cortada, e isso significa que não está sendo aplicado de forma alguma.

40
00:03:15,720 --> 00:03:17,990
E, em vez disso, esse estilo está sendo aplicado.

41
00:03:18,150 --> 00:03:24,120
Então, isso mostra-nos que este estilo está tentando ser aplicado ou está segmentando este elemento que selecionamos,

42
00:03:24,120 --> 00:03:28,640
mas que é interrompido, o que significa que ele não está sendo aplicado.

43
00:03:29,850 --> 00:03:35,460
Então, o próximo tópico que está muito relacionado à herança é chamado de especificidade.

44
00:03:36,030 --> 00:03:42,570
Portanto, a especificidade é essa idéia no sentido de que podemos ter vários estilos visando um elemento e

45
00:03:42,570 --> 00:03:44,060
isso está acontecendo aqui.

46
00:03:44,100 --> 00:03:49,050
Temos vários estilos que visam este UL ou este aliado, por exemplo.

47
00:03:49,320 --> 00:03:54,330
A mentira está ficando vermelha ou está sendo direcionada por esta linha.

48
00:03:54,360 --> 00:03:56,600
Corpo girando tudo no corpo vermelho.

49
00:03:56,700 --> 00:04:01,840
E também está sendo direcionada por esta linha que transforma todo no azul de Juelz.

50
00:04:02,130 --> 00:04:05,310
E então o SS tem que decidir qual ganha.

51
00:04:05,370 --> 00:04:10,770
E nesse caso, qualquer estilo seja o mais próximo desse elemento.

52
00:04:10,770 --> 00:04:16,600
Então, qualquer um é mais específico e, portanto, o que isso significa é que o corpo é muito geral é tudo.

53
00:04:17,280 --> 00:04:20,560
E uma UL é mais específica que quando vai ganhar.

54
00:04:20,910 --> 00:04:22,790
Mas este é apenas um caso simples.

55
00:04:22,800 --> 00:04:27,140
Então, agora vamos aumentar a ante e adicionar alguns outros seletores.

56
00:04:27,330 --> 00:04:35,160
Então, vamos em frente e adicione um seletor de aliados direto e vamos fazer uma laranja aliada.

57
00:04:35,820 --> 00:04:39,100
E, como seria de esperar, todos os aliados são laranja.

58
00:04:39,180 --> 00:04:47,830
E se abrimos o inspetor, veremos que está sendo tornado vermelho pelo corpo, mas isso é interrompido.

59
00:04:48,180 --> 00:04:53,550
Está sendo azulado pelo seletor UL e depois está sendo laranja pelo seletor da

60
00:04:53,550 --> 00:04:55,050
mosca e aquele ganha.

61
00:04:55,050 --> 00:04:59,200
Então, estes são casos simples em que é bem claro qual ganha.

62
00:04:59,400 --> 00:05:02,590
Mas agora vamos apresentar algo em cima disso.

63
00:05:02,940 --> 00:05:10,680
Vamos agora dizer que quero que isso tenha uma classe chamada destaque e eu

64
00:05:14,020 --> 00:05:24,460
vou dar a dois deles e então eu selecionei este destaque de classe e dou uma cor de fundo.

65
00:05:25,120 --> 00:05:26,550
Na verdade, vamos ficar com a cor.

66
00:05:26,860 --> 00:05:31,090
Só assim é toda a mesma cor de propriedade de amarelo e eu economizo.

67
00:05:31,090 --> 00:05:33,040
Qual você acha que vai ganhar agora?

68
00:05:33,610 --> 00:05:40,780
Vamos verificar e você pode ver que a classe de destaque ganha e ficou amarela por causa

69
00:05:40,780 --> 00:05:41,910
dessa classe alta.

70
00:05:42,370 --> 00:05:48,400
Então, isso está nos mostrando algo em L. UMA. Estamos direcionando diretamente a todos os aliados

71
00:05:48,670 --> 00:05:53,960
e tornando-os laranja e também estamos direcionando diretamente a alguns aliados que têm essa classe e tornando-os amarelos.

72
00:05:54,190 --> 00:05:56,960
E neste caso, esta classe ganha.

73
00:05:57,370 --> 00:06:01,420
Então, existem regras muito específicas sobre como isso funciona e eu vou mostrar isso em

74
00:06:01,420 --> 00:06:02,100
apenas um segundo.

75
00:06:02,140 --> 00:06:10,420
Mas antes disso, eu só quero adicionar mais um exemplo, então digamos também dar esse elemento a I. D. e eu vou

76
00:06:10,420 --> 00:06:13,520
chamar isso de especial.

77
00:06:13,610 --> 00:06:22,320
Eu vou direcionar esse elemento especial e eu vou dar uma cor de rosa e eu atualizo.

78
00:06:22,330 --> 00:06:24,760
Você verá que esse elemento gera.

79
00:06:24,850 --> 00:06:32,770
uma vez, se inspecionarmos, você verá que temos um estilo do corpo que não é aplicado um do poço que é herdado,

80
00:06:32,770 --> 00:06:38,570
mas não aplicado um da mentira que não é aplicado um da classe que não é aplicado.

81
00:06:38,570 --> 00:06:39,430
E mais

82
00:06:39,520 --> 00:06:43,660
E, em seguida, um do ID especial que é aplicado.

83
00:06:43,750 --> 00:06:46,790
Então, neste caso, o ID ganha.

84
00:06:47,020 --> 00:06:50,490
Assim, como mencionei, existem regras muito específicas sobre como isso funciona.

85
00:06:50,830 --> 00:06:52,690
E os escrevi aqui.

86
00:06:52,840 --> 00:06:57,310
Mas na verdade eu vou para M. D e primeiro mostrar que eles têm um

87
00:06:57,310 --> 00:07:02,320
excelente artigo sobre isso que eu recomendo que você leia e fala sobre como a especificidade é calculada.

88
00:07:02,320 --> 00:07:08,440
Então, quando ela vê que há três ou quatro cores diferentes que este poderia ser.

89
00:07:08,560 --> 00:07:10,540
Como sabe qual escolher.

90
00:07:10,810 --> 00:07:16,870
E a forma como o faz realmente executa o cálculo para atribuir um valor

91
00:07:16,870 --> 00:07:19,210
numérico a cada um desses seletores.

92
00:07:19,420 --> 00:07:26,020
Então, vai atribuir um valor numérico a este aqui e depois a este e depois a este

93
00:07:26,020 --> 00:07:27,180
e a este.

94
00:07:27,220 --> 00:07:30,180
E, como sabemos, este ganha.

95
00:07:30,250 --> 00:07:36,340
Então, da forma que está realmente calculado, não precisamos saber a matemática exata, mas vou

96
00:07:36,340 --> 00:07:37,640
mostrar isso aqui.

97
00:07:37,720 --> 00:07:43,810
Existe uma calculadora em que realmente podemos digitar coisas em linha que nos direm como

98
00:07:43,810 --> 00:07:44,470
é específico.

99
00:07:44,800 --> 00:07:51,920
Então, se eu selecionar todos os aliados, você verá que tem a especificidade de um.

100
00:07:51,940 --> 00:07:59,560
Agora, vamos tentar saltar esse destaque da classe e isso é 10 vezes mais específico do que a especificidade de 10.

101
00:08:00,040 --> 00:08:04,380
Então é por isso que uma classe 1 sobre a mentira.

102
00:08:04,390 --> 00:08:11,530
E é por isso que este elemento é realmente amarelo, porque o destaque da classe ganhou sobre a

103
00:08:11,530 --> 00:08:12,510
cor laranja.

104
00:08:13,180 --> 00:08:15,430
Agora, se nós vamos e nós adicionamos um I. D.

105
00:08:18,430 --> 00:08:24,660
ou o que chamamos de especial, você pode ver que é 100 vezes mais específico do que apenas a lei.

106
00:08:24,790 --> 00:08:28,540
Então, aquele ganha e isso também bate na classe.

107
00:08:28,540 --> 00:08:36,670
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

108
00:08:36,670 --> 00:08:41,340
específicos e, em seguida, as IDs são as mais específicas que você pode obter.

109
00:08:41,650 --> 00:08:44,920
E também vou mostrar que não está limitado apenas a uma ID.

110
00:08:44,950 --> 00:08:48,330
Então, digamos que queríamos saber o que é mais específico.

111
00:08:48,340 --> 00:08:53,320
Eu tenho uma aula e outra classe dentro dela.

112
00:08:53,320 --> 00:08:59,170
Então, esta é uma Selecta descendente, lembre-se de que esta é apenas uma especificidade de 20.

113
00:08:59,530 --> 00:09:05,160
E se eu tiver um único eu. D. Essa é 100 especificidades.

114
00:09:05,170 --> 00:09:09,970
Então, novamente, eu não quero que você pense que você precisa estar usando o site o tempo todo e calculando números.

115
00:09:10,180 --> 00:09:11,440
Isso não é importante.

116
00:09:11,440 --> 00:09:16,360
Tudo o que você precisa saber é a ordem das magnitudes para que eu vá às minhas anotações aqui

117
00:09:16,360 --> 00:09:19,930
e que elas sejam escritas. Os seletores de tipos são os menos específicos.

118
00:09:19,930 --> 00:09:28,390
Então, isso vai parecer algo assim ou aliado com um ATF dentro dele ou

119
00:09:28,390 --> 00:09:30,580
mesmo o seletor adjacente.

120
00:09:30,700 --> 00:09:34,190
Portanto, esses seletores não são muito específicos.

121
00:09:34,330 --> 00:09:38,860
Mas mesmo dentro deste ano, isso será mais específico do que isso.

122
00:09:38,890 --> 00:09:43,870
Isso também será mais específico do que isso, porque há dois elementos que estamos fazendo referência.

123
00:09:44,200 --> 00:09:47,360
Então, se nós realmente calculamos isso, é especificidade de um.

124
00:09:47,530 --> 00:09:48,850
E isso é dois.

125
00:09:49,570 --> 00:09:52,780
Então o próximo nível é uma classe.

126
00:09:53,890 --> 00:10:01,610
Então, esta será uma ordem de magnitude 10 vezes maior ou mais específica do que qualquer uma dessas.

127
00:10:02,320 --> 00:10:04,380
E assim é o seletor de atributo.

128
00:10:04,420 --> 00:10:16,600
como tipo de entrada, é igual a texto e, portanto, são esses seletores de pseudo-classe que são coisas como pairar.

129
00:10:16,600 --> 00:10:19,660
Então, onde nós temos coisas

130
00:10:19,750 --> 00:10:26,890
Então, uma tag em hover ou entrada que tenha sido verificada e outras coisas como essa que tenham esse cólon lá.

131
00:10:28,060 --> 00:10:31,890
E então, o mais específico é o I. D. seletor.

132
00:10:32,230 --> 00:10:37,840
E assim será outra ordem de grandeza maior ou mais específica do que os seletores aqui.