1
00:00:00,630 --> 00:00:04,510
In deze video gaan we praten over een aantal andere manieren van het selecteren van elementen.

2
00:00:04,590 --> 00:00:07,530
Afgezien van de drie belangrijkste zijn dat we tot nu toe hebben gezien.

3
00:00:08,070 --> 00:00:37,780
En alleen maar om samen te vatten deze drie zijn de elementen Selector de klasse en de ID-selector zodat element eruit zou zien Ally klas met als Dot lage en ID is met de kunst of hekje en wat zetten we binnen zal een ID of een klasse of alle doelgroepen elementen van een soort.

4
00:00:37,800 --> 00:00:42,290
Dus dat zijn drie mogelijke manieren van het selecteren van elementen, maar er zijn nog veel meer.

5
00:00:42,660 --> 00:00:47,310
En we gaan richten op vijf hier en deze vijf zijn degenen die ik denk dat zijn de belangrijkste de meest voorkomende.

6
00:00:47,460 --> 00:00:49,020
Maar er zijn nog veel meer.

7
00:00:49,230 --> 00:00:54,330
In feite is er dit artikel dat ik gekoppeld aan en de omschrijving op Tutt plus het is een gratis artikel.

8
00:00:54,330 --> 00:00:55,350
Het is echt fantastisch.

9
00:00:55,350 --> 00:01:01,710
Het heet de 30 CSSA selectors moet je onthouden en voordat je in paniek raakt u niet nodig om deze te onthouden.

10
00:01:01,920 --> 00:01:05,700
Je zal natuurlijk onthouden van de belangrijkste enen en degenen die we gebruik maken van alle tijd.

11
00:01:05,910 --> 00:01:11,850
Maar het punt van dit artikel is om te zeggen dat er minstens 30 goede degenen die u moet weten over.

12
00:01:11,910 --> 00:01:17,030
Niet te vergeten als dit de enige 30 die je nodig hebt om te onthouden dat is nog steeds vrij een beetje.

13
00:01:17,130 --> 00:01:20,980
En er zijn nog veel meer dat dit artikel zou suggereert u niet hoeft te weten.

14
00:01:21,120 --> 00:01:23,590
Dus het punt is dat er veel verschillende manieren om dit te doen.

15
00:01:23,610 --> 00:01:29,270
Dit artikel wijst hij op 30 van hen en ik ga gewoon om te gaan door middel van vijf of zes van de meer belangrijke degenen.

16
00:01:29,460 --> 00:01:31,300
Dus adviseer ik dat u geven deze een door te lezen.

17
00:01:31,320 --> 00:01:40,340
Er gaat een oefening in de volgende video, die een hoop van wat er in dit artikel en wat we voor meer dan hier en onze tekstredacteur omvat zijn.

18
00:01:40,770 --> 00:01:43,060
Dus ik heb een aantal fundamentele HMO.

19
00:01:43,470 --> 00:01:45,920
Ik ben niet van plan om te gaan door het proces van het creëren van het bestand.

20
00:01:45,960 --> 00:01:55,190
Dit is niet een die je nodig hebt per se om mee te coderen met, maar het is een fundamentele gescherpt hem ziet er als volgt waar we een H1.

21
00:01:55,650 --> 00:01:57,860
We hebben een link die gaat naar Google.

22
00:01:57,960 --> 00:02:00,190
We hebben een UL met drie bondgenoten.

23
00:02:00,600 --> 00:02:15,860
Dan hebben we een H en dan nog zul je met drie bondgenoten en vervolgens nog eens vier en vervolgens een meer je met drie bondgenoten maar elke bondgenoot heeft nu een link en de eerste die gaat ook naar Google als deze link hier.

24
00:02:16,180 --> 00:02:19,540
Dan gaat de ander op Facebook en de laatste gaat om het te lezen.

25
00:02:19,590 --> 00:02:20,650
Dus eenvoudige opmaak.

26
00:02:20,970 --> 00:02:23,520
En dan heb ik een style sheet opgenomen genaamd selectors.

27
00:02:23,540 --> 00:02:38,360
SS Dus hier gaan we in te vullen RC SS Dus het allereerste dat we gaan om te praten over is D-Star selector genoemd en het is met een sterretje en het zal alles op de pagina te selecteren.

28
00:02:38,730 --> 00:02:43,930
Dus dit is niet iets dat je eigenlijk wilt zo vaak doen, maar het ziet er zo uit.

29
00:02:44,080 --> 00:02:47,930
En dan wat we doen ook daadwerkelijk van toepassing op elk afzonderlijk element.

30
00:02:48,750 --> 00:03:02,800
Dus ik ga alles een element van een pixel vast lichtgrijs en je kunt zien wanneer ik doe dat elke element op de pagina van het lichaam H-1 elke link.

31
00:03:02,960 --> 00:03:06,800
Bondgenoot in H allemaal rand rond.

32
00:03:07,080 --> 00:03:11,260
Dus dit is niet iets wat je nodig hebt om een ​​veel te doen, maar je zult het af en toe zien.

33
00:03:11,550 --> 00:03:17,970
De volgende is de afstammelingen Lechter en deze je zult gebruiken en bekijk de hele tijd.

34
00:03:18,030 --> 00:03:27,150
Dus de manier waarop de afstammeling selector werkt is dat het duurt twee of meer tag namen of twee of meer selectors en u ze keten samen.

35
00:03:27,150 --> 00:03:41,350
Dus geef je een voorbeeld geven als ik wil alle van het anker tags die zich binnen van een bondgenoot alleen de anchor-tags binnenkant van een bondgenoot selecteert niet het anker tag lijkt erop dat alleen op zijn eigen.

36
00:03:41,580 --> 00:03:45,860
Ik wil alle anchor tags die zijn afstammelingen van een bondgenoot te selecteren.

37
00:03:46,170 --> 00:03:53,340
Zo te doen dat de syntax lijkt op Ally ruimte en vervolgens verankeren tag.

38
00:03:53,970 --> 00:03:59,610
Dus dit zal alles wat een leeftijd tag binnenkant van een bondgenoot te selecteren en we konden blijven gaan met dit.

39
00:03:59,610 --> 00:04:10,680
Als we hadden meer dus ik kon ook dit herschrijven als dit elke anchor-tag die er binnen in een bondgenoot die de binnenkant van een UL en dat is wat we hier hebben, maar dat is overbodig in ons geval.

40
00:04:11,460 --> 00:04:16,440
En ik zou ook kunnen zeggen dat elke anker tangere alles met de klas Hallo.

41
00:04:16,560 --> 00:04:20,070
Binnen van een bondgenoot, maar we hebben niet elke opmaak die overeenkomt met dat.

42
00:04:20,070 --> 00:04:22,120
Dus elke ankertag binnenkant van een bondgenoot.

43
00:04:22,350 --> 00:04:28,720
En laten we het gewoon een kleur van rood en we vernieuwen.

44
00:04:29,100 --> 00:04:32,460
En je kunt zien die drie anchor tags zijn rood.

45
00:04:32,490 --> 00:04:34,690
Deze is ongewijzigd.

46
00:04:35,580 --> 00:04:38,400
De volgende activiteit is de naastgelegen selector.

47
00:04:38,970 --> 00:04:44,980
Dus met de aangrenzende selector zal doen, is het zal willen laten elementen die komen na de andere element te selecteren.

48
00:04:45,030 --> 00:04:49,910
Dus niet in genest als dit is een bondgenoot genesteld in een put.

49
00:04:50,100 --> 00:04:52,200
Het laat ons toe om een ​​broer of zus te selecteren.

50
00:04:52,350 --> 00:05:01,200
Dus we gaan allemaal ULS die komen na een H voor het selecteren en door na bedoelen we gewoon op hetzelfde niveau.

51
00:05:01,200 --> 00:05:07,970
Dus niet ingesprongen niet in de vork maar direct na even sibling op hetzelfde niveau van een H voor.

52
00:05:07,980 --> 00:05:11,410
Dus dat heet de aangrenzende selector en het ziet er als volgt uit.

53
00:05:11,670 --> 00:05:16,780
We gaan om te zeggen dat de leeftijd van vier plus je wil.

54
00:05:16,890 --> 00:05:21,920
Dus zonder de plus zou dit alles ons binnen en leeftijd van 4, maar met de plus.

55
00:05:21,960 --> 00:05:24,810
Het is ons net dat grenst aan een leeftijd 4 zijn.

56
00:05:24,990 --> 00:05:34,080
En ik ga gewoon geven een rand laten we vier pixel stevige rode en moeten we deze twee UL's die grenzen zijn te zien.

57
00:05:34,080 --> 00:05:40,740
Ze komen na deze leeftijd van vier op hetzelfde niveau hebben een rode rand.

58
00:05:40,920 --> 00:05:46,170
Dus een meer dat ik wil dit laten zien en dit is ook een heel belangrijk wordt genoemd het attribuut selector.

59
00:05:46,410 --> 00:05:51,270
En dus is de attribuut selector is een manier om elementen gebaseerd off van elke eigenschap te selecteren.

60
00:05:51,660 --> 00:05:56,620
Dus in ons geval gaan we een selectie op basis off van de H ref attribuut te doen.

61
00:05:56,970 --> 00:06:01,920
We gaan om te controleren of we gaan om alle links naar Google te zetten, waar H.F. is Google dot com.

62
00:06:01,920 --> 00:06:15,210
We gaan ze één kleur te maken, maar je kunt dit ook gebruiken om alle beelden van een bepaalde bron of alle ingangen van een bepaald type als alle vakjes of alles wachtwoord velden of iets te selecteren.

63
00:06:15,210 --> 00:06:24,290
Dus de syntaxis typt we anchor tag en dan rechte haken en vervolgens binnen gaan we het attribuut dat we op zoek bent naar typen.

64
00:06:24,540 --> 00:06:32,850
Dus Tref is gelijk aan en dan gaan we de links om Google te doen.

65
00:06:32,850 --> 00:06:50,530
Dus dit zal elke anchor tag met HGF die gelijk is aan deze en dan zijn we gewoon gaan om het een kleur te geven selecteert u laat geven een blauwe achtergrond en u kunt deze twee links te zien.

66
00:06:50,520 --> 00:06:53,650
Het eerste gaat naar Google en de tweede gaat naar Google.

67
00:06:53,820 --> 00:06:54,750
Dus ze zijn blauw.

68
00:06:54,870 --> 00:06:57,270
Maar de andere twee links niet naar Google.

69
00:06:57,270 --> 00:06:59,340
Ze gaan naar Facebook en om het te lezen.

70
00:06:59,340 --> 00:07:01,030
Dus ze zijn ongewijzigd.

71
00:07:01,800 --> 00:07:30,170
Dus je zou ook en je zult eigenlijk zien dit veel of zullen een input type gelijk tekst als u wilt dat alle tekst ingangen verschillend stijl of als u wilt dat alle vakjes stijl een manier, omdat alle ingangen, ook al zijn er zo veel verschillende ingangen kleur om kleur ingangen en file's en wachtwoord en e-mails en in te dienen knoppen ze zijn allemaal een input-tag.

72
00:07:30,420 --> 00:07:34,460
Dus gewoon om te selecteren door de input gaat om ons alle verschillende soorten ingangen.

73
00:07:34,500 --> 00:07:37,580
Dus kiezen we vaak op type.

74
00:07:37,620 --> 00:07:42,680
Dus laten we terug naar onze Google ref selector gaan.

75
00:07:43,650 --> 00:07:51,710
Dus er is een meer dat ik wil hier over die heet Einde van het type en de manier waarop het einde van het type werkt is het duurt een aantal, zoals drie of vijf praten.

76
00:07:51,930 --> 00:07:55,710
En dan selecteert u het elke einde van een specifiek element.

77
00:07:55,710 --> 00:08:08,390
Dus als ik wil elke vijfde div of per seconde bondgenoot of de vijfde van de tiende paragraaf op een pagina die ik kon gebruiken en te selecteren.

78
00:08:08,400 --> 00:08:15,120
Dus in dit geval Drona selecteert de uiteindelijke UL en iets naar de finale te doen.

79
00:08:15,130 --> 00:08:17,570
Nou, de derde.

80
00:08:18,210 --> 00:08:33,410
Laten we zeggen dat ik wil het een andere grens of andere achtergrond ik Well dikke darm en van het type en vervolgens een aantal, zoals drie te selecteren geven.

81
00:08:33,860 --> 00:08:35,750
En dan ga ik naar de achtergrond te zeggen.

82
00:08:36,080 --> 00:08:47,400
En laten we het voor de hand liggende achtergrond als paars en kunt u alleen de derde u goed paars ingeschakeld te zien.

83
00:08:47,400 --> 00:08:51,420
Dus dit is handig als je iets wilt onderaan de pagina te selecteren.

84
00:08:51,420 --> 00:09:00,370
Een ding dat ik al moeten er rekening mee is de manier waarop dit werkt is laten we naar een bondgenoot en verander een derde leugen.

85
00:09:00,480 --> 00:09:04,120
En voordat ik dat doe, dat ik wil dat je voor te stellen wat je denkt dat er gaat gebeuren.

86
00:09:04,170 --> 00:09:08,160
Dus is dit verondersteld om de derde bondgenoot te selecteren.

87
00:09:08,400 --> 00:09:10,960
Dus dat zou dit hier denk ik te zijn.

88
00:09:11,220 --> 00:09:15,170
Maar zoals het vernieuwen u zult zien het eigenlijk selecteert elke derde leugen.

89
00:09:15,390 --> 00:09:19,620
Dus van elke groep van bondgenoten dat het gaat om de derde te selecteren.

90
00:09:20,210 --> 00:09:24,370
En dus als ik had een heleboel meer.

91
00:09:26,520 --> 00:09:41,790
Het is belangrijk op te merken dat het nog steeds alleen zo als de derde in een bepaalde groep, dus het is niet elke derde alsof asperges meer zou selecteren en vervolgens asperges weer is het gewoon in elke groep van hen het gaat om de derde te selecteren.