1
00:00:00,970 --> 00:00:01,550
OK.

2
00:00:01,590 --> 00:00:06,090
Quindi in questo video tratteremo due argomenti importanti e vedremo

3
00:00:06,090 --> 00:00:10,650
come non abbiamo ancora parlato e quelli sono eredità e specificità.

4
00:00:10,650 --> 00:00:15,670
Quindi per iniziare dimostreremo il modo in cui funziona l'eredità e vediamo come valutare.

5
00:00:15,690 --> 00:00:17,730
Quindi ho un semplice file qui.

6
00:00:18,000 --> 00:00:25,200
Ha un singolo pozzo con quattro alleati all'interno e scriverò i miei stili in un tag di stile solo per far sì

7
00:00:25,200 --> 00:00:30,050
che sia facile per te vedere che non devi guardarmi girare tra i file.

8
00:00:30,210 --> 00:00:33,800
Ma è sempre meglio farlo in un foglio di stile esterno.

9
00:00:34,560 --> 00:00:41,070
Quindi modellerò l'UL e gli darò un colore viola e quando

10
00:00:44,580 --> 00:00:51,250
lo farò vedrai che quando rinfresco gli alleati diventano effettivamente viola.

11
00:00:51,270 --> 00:00:52,570
Quindi cosa è successo lì.

12
00:00:52,620 --> 00:00:57,990
Sai che ho disegnato l'area in cui sono stati disegnati gli UL e la bugia

13
00:00:57,990 --> 00:01:01,730
è stata modificata indirettamente e ha ereditato quel colore dall'elemento genitore.

14
00:01:01,830 --> 00:01:04,350
Quindi lascia che ti mostri un altro esempio di questo.

15
00:01:05,370 --> 00:01:07,410
Aggiungiamo solo un paragrafo qui

16
00:01:10,850 --> 00:01:15,890
inizia nero e ho intenzione di venire e tout questo viola per ora.

17
00:01:15,900 --> 00:01:18,010
Quindi tutto è solo normale testo nero.

18
00:01:18,010 --> 00:01:25,920
Lo renderò un po 'più grande se vado nel mio stile e dico corpo e conferisco al

19
00:01:26,010 --> 00:01:28,980
corpo un colore rosso e lo aggiorno.

20
00:01:29,250 --> 00:01:31,370
Vedrai che tutto è rosso.

21
00:01:32,040 --> 00:01:38,850
Quindi questo sta solo dimostrando questo concetto di ereditarietà in cui se impostiamo una proprietà su un genitore può

22
00:01:38,850 --> 00:01:40,720
anche influenzare un elemento figlio.

23
00:01:40,920 --> 00:01:46,310
Quindi questo è bello se vogliamo che tutti i paragrafi e tutti gli alleati vengano letti.

24
00:01:46,350 --> 00:01:50,540
Non dobbiamo sederci come dei paragrafi e girarli, quindi selezionare gli alleati e trasformarli in rosso.

25
00:01:50,580 --> 00:01:52,690
Possiamo solo selezionare il corpo.

26
00:01:53,490 --> 00:02:00,840
Quindi la prossima cosa che voglio mostrare è che cosa succede se vado qui e

27
00:02:01,320 --> 00:02:05,980
poi decido che un paragrafo lo voglio davvero essere verde.

28
00:02:08,670 --> 00:02:12,630
Se aggiorniamo vedremo ovviamente che il paragrafo diventa verde.

29
00:02:12,630 --> 00:02:22,350
Allo stesso modo, se voglio che l'ul sia verde o facciamo il blu e io salvi e aggiorni, l'UL diventa blu e così fanno

30
00:02:22,350 --> 00:02:24,830
gli alleati perché ereditano da quello.

31
00:02:25,170 --> 00:02:31,040
Quindi quello che sta succedendo qui sta effettivamente dimostrando questa idea di specificità e CSSA.

32
00:02:31,680 --> 00:02:36,530
Quindi abbiamo più stili che potrebbero avere un impatto su questo stesso alleato.

33
00:02:36,690 --> 00:02:43,410
Potrebbe essere rosso e inizia come rosso e quindi restituirlo blu perché tutto ciò che si suppone

34
00:02:43,410 --> 00:02:44,220
essere blu.

35
00:02:44,700 --> 00:02:52,410
Quindi se andiamo avanti e ispezioniamo uno di questi elementi e renderò questo a schermo intero e ho

36
00:02:52,410 --> 00:02:58,350
intenzione di aumentare questo e aumentare un po 'la dimensione del carattere vedrai che

37
00:02:58,830 --> 00:03:08,190
il colore è impostato come blu proveniente da un UL e ci dice ereditato da UL e se continuiamo a scorrere vedremo

38
00:03:08,190 --> 00:03:09,180
ereditato dal corpo.

39
00:03:09,300 --> 00:03:15,630
Il colore è rosso ma in realtà è barrato e questo significa che non viene applicato affatto.

40
00:03:15,720 --> 00:03:17,990
E invece questo stile viene applicato.

41
00:03:18,150 --> 00:03:24,120
Quindi questo ci mostra che questo stile sta tentando di essere applicato o sta prendendo di mira questo elemento

42
00:03:24,120 --> 00:03:28,640
che abbiamo selezionato ma è stato cancellato, il che significa che non viene effettivamente applicato.

43
00:03:29,850 --> 00:03:35,460
Quindi il prossimo argomento che è strettamente correlato all'ereditarietà è chiamato specificità.

44
00:03:36,030 --> 00:03:42,570
Quindi la specificità è questa idea, nel senso che possiamo avere più stili che prendono di mira un elemento e

45
00:03:42,570 --> 00:03:44,060
questo sta accadendo proprio qui.

46
00:03:44,100 --> 00:03:49,050
Abbiamo più stili che hanno come target questo UL o questo alleato.

47
00:03:49,320 --> 00:03:54,330
La bugia sta diventando rossa o è stata presa di mira da questa linea.

48
00:03:54,360 --> 00:03:56,600
Corpo che trasforma tutto nel corpo in rosso.

49
00:03:56,700 --> 00:04:01,840
Ed è anche preso di mira da questa linea che trasforma tutto in tutto il blu di Juelz.

50
00:04:02,130 --> 00:04:05,310
E così allora le SS devono decidere quale vincerà.

51
00:04:05,370 --> 00:04:10,770
E in questo caso qualunque stile è più vicino a questo elemento.

52
00:04:10,770 --> 00:04:16,600
Quindi, qualunque sia più specifico e quindi ciò che questo significa che il corpo è molto generale, è tutto.

53
00:04:17,280 --> 00:04:20,560
E un UL è più specifico di quando vincerà.

54
00:04:20,910 --> 00:04:22,790
Ma questo è solo un caso semplice.

55
00:04:22,800 --> 00:04:27,140
Quindi ora alziamo un po 'la posta e aggiungiamo altri selettori.

56
00:04:27,330 --> 00:04:35,160
Quindi andiamo avanti e aggiungiamo un selettore alleato diretto e facciamo un alleato arancione.

57
00:04:35,820 --> 00:04:39,100
E come ti aspetteresti, rende tutti gli alleati arancioni.

58
00:04:39,180 --> 00:04:47,830
E se apriamo l'ispettore vedremo che è stato trasformato in rosso dal corpo, ma questo è cancellato.

59
00:04:48,180 --> 00:04:53,550
Viene reso blu dal selettore UL e poi viene trasformato in arancione dal selettore di

60
00:04:53,550 --> 00:04:55,050
mosche e quello vince.

61
00:04:55,050 --> 00:04:59,200
Quindi questi sono tutti casi semplici in cui è abbastanza chiaro quale si vince.

62
00:04:59,400 --> 00:05:02,590
Ma ora introduciamo qualcosa in più.

63
00:05:02,940 --> 00:05:10,680
Diciamo ora che voglio che questo abbia una classe chiamata highlight e la

64
00:05:14,020 --> 00:05:24,460
darò a due di essi e poi selezionerò questa evidenziazione di classe e darò un colore di sfondo.

65
00:05:25,120 --> 00:05:26,550
In realtà limitiamoci al colore.

66
00:05:26,860 --> 00:05:31,090
Solo così è tutto lo stesso colore della proprietà del giallo e io salvo.

67
00:05:31,090 --> 00:05:33,040
Quale pensi che vincerai adesso.

68
00:05:33,610 --> 00:05:40,780
Controlliamo e puoi vedere che la classe di evidenziazione vince e diventa gialla a causa di quella

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

70
00:05:42,370 --> 00:05:48,400
Quindi questo ci sta mostrando qualcosa in cui in L. UN. Stiamo prendendo di mira tutti gli alleati e

71
00:05:48,670 --> 00:05:53,960
li facciamo diventare arancioni, quindi stiamo anche prendendo di mira alcuni alleati che hanno questa classe e li rendono gialli.

72
00:05:54,190 --> 00:05:56,960
E in questo caso questa classe vince.

73
00:05:57,370 --> 00:06:01,420
Quindi ci sono regole molto specifiche su come funziona e ve lo mostrerò in

74
00:06:01,420 --> 00:06:02,100
un secondo.

75
00:06:02,140 --> 00:06:10,420
Ma prima voglio solo aggiungere un altro esempio, quindi diamo anche questo elemento a I. D. e lo

76
00:06:10,420 --> 00:06:13,520
chiamerò speciale.

77
00:06:13,610 --> 00:06:22,320
Ho intenzione di bersagliare quell'elemento speciale e ho intenzione di dargli un colore rosa e lo aggiorno.

78
00:06:22,330 --> 00:06:24,760
Vedrai che quell'elemento vince.

79
00:06:24,850 --> 00:06:32,770
una volta se ispezioniamo vedrai che abbiamo uno stile dal corpo che non è applicato dal pozzo che è ereditato ma

80
00:06:32,770 --> 00:06:38,570
non applicato dalla menzogna che non è applicato uno dalla classe che non è applicata.

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

82
00:06:39,520 --> 00:06:43,660
E poi uno dall'ID speciale che viene applicato.

83
00:06:43,750 --> 00:06:46,790
Quindi in questo caso l'ID vince.

84
00:06:47,020 --> 00:06:50,490
Quindi, come ho detto, ci sono regole molto specifiche su come funziona.

85
00:06:50,830 --> 00:06:52,690
E li ho scritti qui.

86
00:06:52,840 --> 00:06:57,310
Ma in realtà sto andando a M. D e prima di mostrarti che hanno un

87
00:06:57,310 --> 00:07:02,320
grande articolo su questo argomento che consiglio vivamente di leggere e che parla di come viene calcolata la specificità.

88
00:07:02,320 --> 00:07:08,440
Quindi, quando vede che ci sono tre o quattro colori diversi, questo potrebbe essere.

89
00:07:08,560 --> 00:07:10,540
Come fa a sapere quale scegliere.

90
00:07:10,810 --> 00:07:16,870
E il modo in cui lo fa esegue effettivamente il calcolo, quindi assegna un valore

91
00:07:16,870 --> 00:07:19,210
numerico a ciascuno di questi selettori.

92
00:07:19,420 --> 00:07:26,020
Quindi assegnerà un valore numerico a questo qui e poi a questo e poi a questo

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

94
00:07:27,220 --> 00:07:30,180
E come sappiamo questo vince.

95
00:07:30,250 --> 00:07:36,340
Quindi, il modo in cui viene effettivamente calcolato non è in realtà necessario conoscere la matematica esatta, ma

96
00:07:36,340 --> 00:07:37,640
te lo mostrerò qui.

97
00:07:37,720 --> 00:07:43,810
C'è una calcolatrice che possiamo effettivamente scrivere cose online che ci diranno quanto è

98
00:07:43,810 --> 00:07:44,470
specifico qualcosa.

99
00:07:44,800 --> 00:07:51,920
Quindi se seleziono tutti gli alleati vedrai che ha la specificità di uno.

100
00:07:51,940 --> 00:07:59,560
Ora proviamo ad attuare l'evidenziazione di classe e 10 volte più specifica della specificità di 10.

101
00:08:00,040 --> 00:08:04,380
Ecco perché una classe 1 ha superato la bugia.

102
00:08:04,390 --> 00:08:11,530
Ed è per questo che questo elemento è in realtà giallo perché il clou della classe ha vinto

103
00:08:11,530 --> 00:08:12,510
sul colore arancione.

104
00:08:13,180 --> 00:08:15,430
Ora se andiamo e aggiungiamo un I. D.

105
00:08:18,430 --> 00:08:24,660
o quello che chiamiamo uno speciale puoi vedere che è 100 volte più specifico del solo tag della legge.

106
00:08:24,790 --> 00:08:28,540
In modo che uno vince e che batte anche la classe.

107
00:08:28,540 --> 00:08:36,670
Quindi la regola di base qui è che i nomi dei tag dei selettori di elementi non sono selettori di classi molto specifici sono molto

108
00:08:36,670 --> 00:08:41,340
più specifici e quindi gli ID sono i più specifici che è possibile ottenere.

109
00:08:41,650 --> 00:08:44,920
E ti mostrerò anche che non è limitato a un solo ID.

110
00:08:44,950 --> 00:08:48,330
Quindi diciamo che volevamo sapere cosa è più specifico.

111
00:08:48,340 --> 00:08:53,320
Ho una classe e un'altra classe al suo interno.

112
00:08:53,320 --> 00:08:59,170
Quindi questo è un discendente di Selecta, ricordo che questa è solo una specificità.

113
00:08:59,530 --> 00:09:05,160
E se ho solo un singolo I. D. Questa è la 100 specificità.

114
00:09:05,170 --> 00:09:09,970
Quindi, ancora una volta non voglio che tu pensi che sia necessario utilizzare il sito continuamente e calcolare i numeri.

115
00:09:10,180 --> 00:09:11,440
Questo non è importante.

116
00:09:11,440 --> 00:09:16,360
Tutto quello che devi sapere è l'ordine di grandezza, quindi andrò alle mie note qui

117
00:09:16,360 --> 00:09:19,930
e farle scrivere i selettori di tipo sono i meno specifici.

118
00:09:19,930 --> 00:09:28,390
Quindi sembrerà qualcosa di simile o alleato con un ATF al suo interno o

119
00:09:28,390 --> 00:09:30,580
persino il selettore adiacente.

120
00:09:30,700 --> 00:09:34,190
Quindi questi selettori non sono molto specifici.

121
00:09:34,330 --> 00:09:38,860
Ma anche quest'anno, questo sarà più specifico di questo.

122
00:09:38,890 --> 00:09:43,870
Questo sarà più specifico di questo anche perché ci sono due elementi a cui stiamo facendo riferimento.

123
00:09:44,200 --> 00:09:47,360
Quindi se lo calcoliamo in realtà questa è la specificità di uno.

124
00:09:47,530 --> 00:09:48,850
E questo è due.

125
00:09:49,570 --> 00:09:52,780
Quindi il livello successivo è una classe.

126
00:09:53,890 --> 00:10:01,610
Quindi questo sarà un ordine di grandezza 10 volte più grande o più specifico di ognuno di questi.

127
00:10:02,320 --> 00:10:04,380
E così è il selettore di attributi.

128
00:10:04,420 --> 00:10:16,600
il tipo di input è uguale al testo e così sono questi selettori di pseudo-classe che sono cose come hover.

129
00:10:16,600 --> 00:10:19,660
Quindi, dove abbiamo cose come

130
00:10:19,750 --> 00:10:26,890
Quindi un tag su hover o input che è stato controllato e altre cose come quella che hanno questo due punti lì.

131
00:10:28,060 --> 00:10:31,890
E poi la cosa più specifica è la I. D. selettore.

132
00:10:32,230 --> 00:10:37,840
E quindi questo sarà un altro ordine di grandezza maggiore o più specifico dei selettori qui.