1
00:00:00,630 --> 00:00:04,510
In questo video parleremo di alcuni altri modi di selezionare gli elementi.

2
00:00:04,590 --> 00:00:07,530
A parte i tre principali che abbiamo visto finora.

3
00:00:08,070 --> 00:00:11,790
E solo per ricapitolare quei tre sono il

4
00:00:14,790 --> 00:00:27,450
selettore di elementi la classe e il selettore ID in modo che l'elemento assomigli alla classe di Ally con come Dot low e ID sia con il

5
00:00:27,450 --> 00:00:36,420
simbolo art o hash e qualunque cosa mettiamo dentro verrà indirizzato a un ID o una classe o tutti

6
00:00:36,420 --> 00:00:37,780
elementi di un tipo.

7
00:00:37,800 --> 00:00:42,290
Quindi questi sono tre modi possibili di selezionare gli elementi, ma ce ne sono molti di più.

8
00:00:42,660 --> 00:00:46,560
su cinque qui e questi cinque sono quelli che penso siano i più importanti i più comuni.

9
00:00:46,560 --> 00:00:47,310
E ci concentreremo

10
00:00:47,460 --> 00:00:49,020
Ma ce ne sono molte altre.

11
00:00:49,230 --> 00:00:54,300
In effetti c'è questo articolo a cui mi sono collegato e la descrizione su Tutt's Plus è un articolo gratuito.

12
00:00:54,330 --> 00:00:55,350
E 'davvero grandioso.

13
00:00:55,350 --> 00:01:00,990
Si chiamano i 30 selettori CSSA che devi memorizzare e prima di andare nel panico non è

14
00:01:00,990 --> 00:01:01,710
necessario memorizzarli.

15
00:01:01,920 --> 00:01:05,700
Naturalmente memorizzerai quelli più importanti e quelli che usiamo sempre.

16
00:01:05,910 --> 00:01:11,520
Ma il punto di questo articolo è di dire che ce ne sono almeno 30 buoni che dovresti sapere.

17
00:01:11,910 --> 00:01:17,030
Per non parlare se questi sono gli unici 30 di cui hai bisogno per imparare a memoria che è ancora un bel po '.

18
00:01:17,130 --> 00:01:20,980
E ci sono molte altre cose che questo articolo suggerirebbe che non è necessario conoscere.

19
00:01:21,120 --> 00:01:23,590
Quindi il punto è che ci sono molti modi diversi per farlo.

20
00:01:23,610 --> 00:01:28,680
Questo articolo ne mette in evidenza 30 e passerò attraverso cinque o sei dei

21
00:01:28,680 --> 00:01:29,270
più importanti.

22
00:01:29,460 --> 00:01:31,300
Quindi ti consiglio di dargli una lettura.

23
00:01:31,320 --> 00:01:36,960
Ci sarà un esercizio nel prossimo video che comprende molto di ciò che è trattato in questo articolo così

24
00:01:36,960 --> 00:01:40,340
come ciò che copriamo qui e il nostro editor di testo.

25
00:01:40,770 --> 00:01:43,060
Quindi ho alcuni HMO di base.

26
00:01:43,470 --> 00:01:45,920
Non ho intenzione di passare attraverso il processo di creazione del file.

27
00:01:45,960 --> 00:01:51,510
Questo non è uno di quelli che è necessario necessariamente codificare, ma è un aspetto

28
00:01:51,510 --> 00:01:55,190
marginale che appare come questo in cui abbiamo un H1.

29
00:01:55,650 --> 00:01:57,860
Abbiamo un link che va a Google.

30
00:01:57,960 --> 00:02:00,190
Abbiamo un'UL con tre alleati.

31
00:02:00,600 --> 00:02:07,350
e poi un'altra con tre alleati e poi un'altra quattro e poi un'altra con tre alleati ma

32
00:02:07,350 --> 00:02:14,460
ogni alleato ora ha un link e anche il primo va a Google come questo link qui sopra.

33
00:02:14,460 --> 00:02:15,860
Poi abbiamo una H

34
00:02:16,180 --> 00:02:19,540
Poi l'altro va su Facebook e l'ultimo a leggerlo.

35
00:02:19,590 --> 00:02:20,650
Marcatura così semplice.

36
00:02:20,970 --> 00:02:23,520
E poi ho un foglio di stile incluso chiamato selettori.

37
00:02:23,540 --> 00:02:30,510
SS Quindi qui andremo a riempire RC SS Quindi il primo di cui

38
00:02:30,510 --> 00:02:38,360
parleremo è chiamato selettore D-Star ed è con un asterisco e selezionerà tutto sulla pagina.

39
00:02:38,730 --> 00:02:43,930
Quindi non è qualcosa che in realtà vuoi fare spesso, ma sembra così.

40
00:02:44,080 --> 00:02:47,930
E poi qualsiasi cosa facciamo sarà applicata a ogni singolo elemento.

41
00:02:48,750 --> 00:02:57,690
Quindi ho intenzione di dare a tutto un elemento di un pixel grigio chiaro solido e puoi vedere quando faccio che

42
00:02:58,260 --> 00:03:02,800
ogni singolo elemento sulla pagina del corpo H-1 ogni link.

43
00:03:02,960 --> 00:03:06,800
Alleato in H per tutti ottenere il bordo intorno.

44
00:03:07,080 --> 00:03:11,260
Quindi non è qualcosa che devi fare molto ma lo vedrai occasionalmente.

45
00:03:11,550 --> 00:03:17,970
Il prossimo è il discendente Lechter e questo lo userete e vedrete sempre.

46
00:03:18,030 --> 00:03:24,390
Quindi il modo in cui il selettore discendente funziona è che ci vogliono due o più nomi di tag o

47
00:03:24,390 --> 00:03:27,150
due o più selettori e li si incatena.

48
00:03:27,150 --> 00:03:36,270
trovano all'interno di un alleato solo i tag di ancoraggio all'interno di un alleato, non il tag di ancoraggio che appare solo per conto proprio.

49
00:03:36,270 --> 00:03:41,350
Quindi diamo un esempio se voglio selezionare tutti i tag di ancoraggio che si

50
00:03:41,580 --> 00:03:45,860
Voglio selezionare tutti i tag di ancoraggio che sono discendenti di un alleato.

51
00:03:46,170 --> 00:03:53,340
Quindi per farlo la sintassi sembra spazio alleato e quindi tag di ancoraggio.

52
00:03:53,970 --> 00:03:59,590
Quindi selezioneremo tutto ciò che è un'etichetta dell'età all'interno di un alleato e potremmo continuare con questo.

53
00:03:59,610 --> 00:04:05,640
Se ne avessimo di più potrei anche riscrivere questo come ogni tag di ancoraggio che si trova all'interno di un

54
00:04:05,700 --> 00:04:10,680
alleato all'interno di un UL che è quello che abbiamo qui, ma è ridondante nel nostro caso.

55
00:04:11,460 --> 00:04:16,440
E potrei anche dire che ogni ancora tangere tutto con la classe Ciao.

56
00:04:16,560 --> 00:04:20,070
All'interno di un alleato, ma non abbiamo alcun markup che corrisponda a quello.

57
00:04:20,070 --> 00:04:22,120
Quindi ogni tag di ancoraggio all'interno di un alleato.

58
00:04:22,350 --> 00:04:28,720
E diamo solo un colore rosso e ci aggiorniamo.

59
00:04:29,100 --> 00:04:32,460
E puoi vedere che questi tre tag di ancoraggio sono rossi.

60
00:04:32,490 --> 00:04:34,690
Questo è invariato.

61
00:04:35,580 --> 00:04:38,400
Il prossimo è il selettore adiacente.

62
00:04:38,970 --> 00:04:44,490
Quindi, con il selettore adiacente, sarà come se ci permettessimo di selezionare elementi che vengono dopo un

63
00:04:44,490 --> 00:04:44,980
altro elemento.

64
00:04:45,030 --> 00:04:49,910
Quindi non annidato dentro come questo è un alleato che si annida in un pozzo.

65
00:04:50,100 --> 00:04:52,200
Ci permette di selezionare un fratello.

66
00:04:52,350 --> 00:05:01,140
Quindi selezioneremo tutti gli ULS che verranno dopo una H per e dopo intendiamo solo sullo stesso livello.

67
00:05:01,200 --> 00:05:07,380
Quindi non indentato non all'interno della forcella, ma direttamente dopo appena come un fratello sullo stesso livello di una H

68
00:05:07,380 --> 00:05:07,970
per esso.

69
00:05:07,980 --> 00:05:11,410
Quindi si chiama selettore adiacente e sembra così.

70
00:05:11,670 --> 00:05:16,780
Stiamo per dire età quattro più lo farai.

71
00:05:16,890 --> 00:05:21,920
Quindi senza il vantaggio questo sarebbe tutto noi dentro e età 4 ma con il vantaggio.

72
00:05:21,960 --> 00:05:24,810
Siamo noi adiacenti ad un'età di 4 anni.

73
00:05:24,990 --> 00:05:33,330
E sto per dare un bordo, facciamo quattro pixel in rosso e dovremmo vedere questi due UL che

74
00:05:33,330 --> 00:05:34,080
sono adiacenti.

75
00:05:34,080 --> 00:05:40,740
Arrivano dopo questa età quattro allo stesso livello hanno un bordo rosso.

76
00:05:40,920 --> 00:05:45,390
Quindi un altro che voglio mostrare questo e questo è anche molto importante è chiamato il

77
00:05:45,390 --> 00:05:46,170
selettore degli attributi.

78
00:05:46,410 --> 00:05:51,270
E così il selettore degli attributi è un modo per selezionare gli elementi in base a qualsiasi attributo.

79
00:05:51,660 --> 00:05:56,620
Quindi nel nostro caso faremo una selezione basata sull'attributo ref H.

80
00:05:56,970 --> 00:06:01,920
Verificheremo che trasformeremo tutti i link in Google in cui H. F. è Google dot com.

81
00:06:01,920 --> 00:06:07,350
Li trasformeremo in un colore, ma potresti anche usarlo per selezionare tutte le immagini di una particolare

82
00:06:07,350 --> 00:06:15,210
fonte o tutti gli input di un particolare tipo come tutte le caselle di controllo o tutti i campi password o qualcosa del genere.

83
00:06:15,210 --> 00:06:23,250
Quindi la sintassi scriviamo il tag di ancoraggio e quindi le parentesi quadre e poi dentro andremo a digitare l'attributo

84
00:06:23,250 --> 00:06:24,290
che stiamo cercando.

85
00:06:24,540 --> 00:06:32,850
Quindi Tref è uguale e quindi faremo i link a Google.

86
00:06:32,850 --> 00:06:40,470
ancoraggio con HGF uguale a questo e poi gli daremo un colore, lasciandogli uno sfondo blu e potrai vedere

87
00:06:40,650 --> 00:06:41,580
questi due

88
00:06:44,240 --> 00:06:44,760
collegamenti.

89
00:06:48,240 --> 00:06:50,530
Quindi questo selezionerà ogni tag di

90
00:06:50,520 --> 00:06:53,650
Questo primo va a Google e il secondo a Google.

91
00:06:53,820 --> 00:06:54,750
Quindi sono blu.

92
00:06:54,870 --> 00:06:57,270
Ma gli altri due link non vanno su Google.

93
00:06:57,270 --> 00:06:59,340
Vanno su Facebook e lo leggono.

94
00:06:59,340 --> 00:07:01,030
Quindi sono invariati.

95
00:07:01,800 --> 00:07:10,680
o se vuoi che modifichino tutti i checkbox in un modo solo perché tutti gli input anche se ci sono così molti input diversi colore

96
00:07:10,680 --> 00:07:18,600
per input colore e immagini di file e password ed e-mail e pulsanti di invio sono tutti un tag di input.

97
00:07:19,110 --> 00:07:26,370
Quindi potresti anche e vedrai molto spesso questo o avrai un tipo di input uguale al testo se vuoi che

98
00:07:26,370 --> 00:07:30,170
sia in stile tutti gli input di testo in modo diverso

99
00:07:30,420 --> 00:07:34,460
Quindi, solo per selezionare per input ci darà tutti i diversi tipi di input.

100
00:07:34,500 --> 00:07:37,580
Quindi spesso selezioniamo per tipo.

101
00:07:37,620 --> 00:07:42,680
Quindi torniamo al nostro selettore di riferimento di Google.

102
00:07:43,650 --> 00:07:48,170
Quindi c'è un altro di cui voglio parlare qui, che è chiamato End of type e il modo in

103
00:07:48,270 --> 00:07:51,710
cui la fine del tipo funziona è che prende un numero come tre o cinque.

104
00:07:51,930 --> 00:07:55,710
E poi seleziona ogni fine di un elemento specifico.

105
00:07:55,710 --> 00:08:06,540
Quindi se voglio selezionare ogni quinto div o ogni secondo alleato o il quinto il decimo paragrafo su una pagina che potrei

106
00:08:06,570 --> 00:08:08,390
usare e di tipo.

107
00:08:08,400 --> 00:08:15,120
Quindi in questo caso Drona seleziona l'UL finale e fa qualcosa alla finale.

108
00:08:15,130 --> 00:08:17,570
Bene, il terzo.

109
00:08:18,210 --> 00:08:29,550
Diciamo che voglio dargli un bordo diverso o uno sfondo diverso, selezionerò i due punti e di tipo

110
00:08:30,030 --> 00:08:33,410
e poi un numero come tre.

111
00:08:33,860 --> 00:08:35,750
E poi ho intenzione di dire sfondo.

112
00:08:36,080 --> 00:08:45,030
E diamo uno sfondo ovvio come il viola e puoi vedere solo il terzo che sei diventato viola.

113
00:08:47,400 --> 00:08:51,420
Quindi questo è utile se vuoi selezionare qualcosa nella pagina.

114
00:08:51,420 --> 00:08:59,700
Una cosa che dovrei notare è che il modo in cui funziona è andare ad un alleato e cambiare una terza

115
00:08:59,790 --> 00:09:00,370
bugia.

116
00:09:00,480 --> 00:09:04,120
E prima che lo faccia voglio che tu immagini quello che pensi che succederà.

117
00:09:04,170 --> 00:09:08,160
Quindi questo dovrebbe selezionare il terzo alleato.

118
00:09:08,400 --> 00:09:10,960
Quindi questo sarebbe qui qui, credo.

119
00:09:11,220 --> 00:09:15,170
Ma man mano che si aggiorna vedrai che in realtà seleziona ogni terza bugia.

120
00:09:15,390 --> 00:09:19,620
Quindi da ogni gruppo di alleati selezionerà il terzo.

121
00:09:20,210 --> 00:09:24,370
E quindi se avessi un mucchio in più.

122
00:09:26,520 --> 00:09:32,070
È importante notare che è ancora solo così come il terzo di un gruppo dato

123
00:09:32,070 --> 00:09:39,180
che non è ogni terzo come se selezionasse di nuovo gli asparagi e poi di nuovo gli asparagi, è solo

124
00:09:39,210 --> 00:09:41,790
in ogni gruppo che selezionerà il terzo.

125
00:09:41,790 --> 00:09:48,690
C'è comunque un modo per farlo selezionare un numero pari in modo da poter selezionare ogni altro alleato e

126
00:09:48,690 --> 00:09:50,370
renderlo viola in questo modo