In deze video gaan we te gaan over een oplossing voor het probleem CSSA selectors in te stellen.
En ik ga gewoon om te gaan over elk probleem van boven naar beneden.
Dus voel je vrij om vooruit te spoelen als er slechts een of twee dat je problemen had met.
Dus hebben we de eerste samen in de eerste video geven het lichaam element een achtergrond van deze kleur.
Dus we gewoon zeggen lichaam de achtergrond is deze kleur op te slaan voor ons.
Laten we gaan en laden in de browser vernieuwen en je kunt zien we een grijze achtergrond.
Dus de volgende is het maken van de H een element deze kleur.
Dus hetzelfde, behalve in plaats van achtergrond we net gezegd gekleurd.
We besparen eigen is of H-1 blijkt paars.
Vergeet niet als we meer dan een H-1 had op de pagina zouden ze allemaal paars.
Dus dit volgende is maak alle H-2 elementen oranje.
Dus exact dezelfde selector als de bovenstaande twee.
En dan om het oranje Ik ga gewoon gebruik maken van de ingebouwde in oranje kleur te maken, maar je kon een andere kleur systeem te gebruiken en je kunt zien we elke leeftijd aan die vier van hen.
Ze draaien oranje.
Dus de volgende up gaan we om dit te verschuiven naar de kant bondgenoot alle elementen blauw te maken.
Kies je eigen hexadecimale blauw.
Dus om dat te doen selecteren we alle bondgenoten en dan geven we ze een kleur en we gaan een hexadecimaal blauwe doen.
Dus je kan alles hier zo lang als het is meer blauw dan iets anders te zetten.
Dus onthoud het eerste kanaal rood is dan de volgende twee zijn groen.
Dus we doen een beetje groen laten we het doen en dan een bos van blauw.
Behalve dat en laten we een kijkje nemen op de geallieerden en u kunt zien we blauwe lichten.
Dus nu verander de achtergrond op elke paragraaf geel te zijn.
Het is gewoon een meer waar we elk element van een type te selecteren.
Dus alle alinea achtergrond geel sparen en we krijgen een bos van gele punten.
Next up selecteert u alle ingangen en geef ze een drie pixel rode rand.
Dus ingang grens en er zijn een paar manieren om dit te kunnen we het allemaal tegelijk doen doen.
Bestel drie pixel continu rood en je kunt zien onze twee ingangen hebben een prefix of effen rode rand of we konden doen dit apart grens kleur rood grens met drie pixels en tenslotte de grens stijl is solide voor vrij de hand liggende redenen.
Het is een stuk makkelijker om dit te doen.
Maar zo nu en dan zul je dit wilt doen als je naar javascript.
We willen gewoon werken een deel.
Dus wanneer een gebruiker over iets zweeft u het wilt van een rode rand te wijzigen in een groene rand.
Nou kunnen we alleen maar willen de kleur te veranderen en kunnen we het verlaten met in de stijl hoe ze zijn.
Dus ik ga om het te laten als dit.
Volgende gaan we nu over naar de klasse selector.
Dus geef alles met de klas Hallo.
Een witte achtergrond.
En als we kijken naar de h t m l is er eigenlijk maar een ding.
Deze eerste paragraaf binnen deze div met klasse.
Hallo.
Dus selecteren we die klasse stip.
Hallo achtergrond wit.
En je kunt zien we deze paragraaf hier.
Het wordt wit.
Next up geven het element met ID speciaal een twee pixel stevige blauwe grens.
Kies je eigen R.G. zijn blauw.
Dus hetzelfde nog een keer in plaats van een punt gebruiken we de hekje of de boog naar Thorpe en dan dat de naam van de ID ze weer kan zien is hier Id bijzonder.
En dan willen we het een twee pixel stevige grens te geven om zo te pixel solide en vervolgens R.G. zijn blauw.
En dus zal moeten 0 rood 100 groen 200 blauw en als we fris te zijn dat je kunt zien we het is vrij klein, maar een 2 pixel blauwe rand rond deze paragraaf met het ID.
Next up te maken van alle alinea's die zijn genest in van divs 25 pixel lettertype en de hint is gebruik maken van deze eigenschap font size Dasch 25 pixels.
Dus wat we nodig hebben om hier te doen is eerder dan selecteert u alle punten die we willen alleen de leden die zich binnen van een div, zodat je kunt zien zijn er een aantal zoals deze hier, dat is niet in een div.
We willen niet dat mensen te zijn 25 pixels in lettergrootte.
Dus gebruiken we deze nakomelingen selector waar we zeggen div en dan de binnenkant van die div alle alinea's, zodat alinea's die in een div leven maakt niet uit welke zomaar een alinea's in elke divs afd zullen ze te selecteren en geef ze lettergrootte 25 pixels op te slaan dat refresh en je kunt zien dat deze alle groter worden, maar deze degenen die paragraaf niet in een div zeggen niet groter worden, omdat ze niet in plaats van een div Next up maken alleen ingangen met type tekst hebben een grijze achtergrond.
Dus dit is een ander type selector en het is gebaseerd off van een attribuut.
Dus het kenmerk dat u wilt doen is het vinden waar de soort gelijk is aan de tekst is.
Dus eigenlijk alleen deze ingang hier soort gelijk aan de tekst.
En dus is de manier waarop we dat doen we gaan typen input en vervolgens vierkante beugels en yep rechte haken.
En dan is er de binnenkant van het attribuut dat is het type en we zijn op zoek naar waar het gelijk is aan tekst en dan zijn we gewoon gaan zeggen achtergrond grijs.
En dan, als we naar beneden scrollen hier en vernieuw hou je ogen hier kun je zien we een grijze achtergrond.
Dus nogmaals dit is handig als u wilt dat alle links die naar Google te selecteren.
We zouden selecteren op basis off van H.F. of we konden off daar selecteren van een ander attribuut.
Dus de volgende op te geven beide leden in het derde div een roze achtergrond.
Dus dit wordt een beetje gek.
Dus laten we eens een kijkje op de HMO.
Hier is onze derde div ..
De eerste is hier.
De tweede is hier en de derde is hier en daar zijn twee alinea's en we willen hen beiden te selecteren en geef ze een roze achtergrond.
Dus wat we deden voordat was select alle alinea's binnen van alle divs die hier niet zal werken.
Wat we doen wat we willen doen is het selecteren van alle alinea's binnenkant van de derde div op de pagina.
En de manier waarop we de derde div kunt opgeven is tot het einde van het type te gebruiken.
Dus we zullen zeggen div en van het type 3.
Dus dat gaat ons een derde div geven en dan in plaats van dat alle punten en dan zijn we gewoon gaan zeggen de achtergrond is roze en bespaar refresh en laten we dubbel te controleren.
Hier is onze eerste div.
Hier is de tweede div.
En hier is de derde div.
Start om paragraaf beginnen met vest en ik ben de tweede paragraaf.
Daar gaan we vest.
Ik ben de tweede paragraaf.
Next up geven deze tweede paragraaf in het derde div vijf pixel grens witte rand.
Dus dit is zeer vergelijkbaar behalve wij willen alleen de tweede paragraaf in het derde div.
Dus gewoon deze.
Dus doen we het zelfde ding waar we het derde div en type 3 en dan in plaats van alle alinea we vervolgens naar paragraaf en van het type te doen selecteren.
En we willen dat de tweede, zodat we kunnen combineren.
Dit gaat om de tweede paragraaf in plaats van de derde div kiezen en wij willen geven het een 5 pixel witte rand grens 5 pixel effen wit.
Daar gaan we.
Hier is onze vijf pixel stevige witte rand op de tweede paragraaf in de div.
Niet de eerste.
Next up maken van de E-M in het derde div element wit en 20 pixel lettertype.
Dus dat is deze E-M hier cronut skateboard.
Als je niet Krown weet is het is erg lekker.
Misschien overschat.
Zeker te duur gebak uit New York City.
Het heeft een donut en een croissant.
Dus zeker thuis in plaats van de hipster ipsum woordenschat hier.
En we gaan dat E-M te nemen en we gaan het wit en 20 pixel Swan te maken.
Dus net als vroeger moesten we de derde div 3 en dan gewoon de E-M in te selecteren.
En dit zal alle IEM's selecteren en het gebeurt gewoon dat er maar één.
Maar als er meer dan één we zouden willen eerst van het type of E-M in plaats van een paragraaf zeggen E-M, maar ik zal gewoon laten zoals dit voor nu.
En we willen het wit naar kleur en 20 pixel font color wit en lettergrootte 20 pixels geven.
En alleen maar om u eraan te herinneren dat we gaan om tijd te besteden aan het praten over de lettertypen en lettergrootte en een heleboel andere dingen in de toekomst video's.
Daar gaan we.
Het is wit en de lettergrootte verandert.
Dus nu zijn we op een aantal van de bonus oefeningen die sommige van mijn favoriet zijn.
Er zijn enkele van de meer obscure de meer interessante manieren selecteren dingen en te manipuleren.
Dus om te beginnen.
Laten we eens kijken naar het maken van alle geselecteerde vakjes hebben een linkermarge van 50 pixels en ik gaf het aan u.
U moet margin links te gebruiken voor 50 pixels.
Dus er is een selector om elementen die worden gecontroleerd selecteren.
En het ziet er net als dit.
Het is een pseudo-selector net als n-type.
Dus moeten we zeggen wat we op zoek bent naar die is gecontroleerd.
Dus ik ga gewoon alle ingangen die zijn gecontroleerd, want vergeet niet dat vakjes zijn input type gelijk checkbox zijn er andere elementen die kunnen worden gecontroleerd hoewel vooral de radioknop zeggen.
Zo zou dit ook kiezen voor elke radio knoppen die zijn gecontroleerd en dat is prima voor nu.
Dus het lijkt erop dat deze ingang colon gecontroleerd.
En wat we willen doen is gebruik marge vijftig pixels.
Dus dit is een klein voorproefje van wat we komen op in een aantal van de toekomst video's wanneer we deze add en het gaat om ruimte toe te voegen aan de linkerkant van de checkbox zodat u degenen die worden gecontroleerd verplaatst kunnen zien.
Nu als ik kijk dit nu wordt dit gecontroleerd en beweegt naar rechts 50 pixels.
Als ik uncheck hen en terug te gaan naar links.
Dus dat is gecontroleerd.
De volgende.
Dit is waarschijnlijk mijn favoriet.
Maak het label elementen in hoofdletters zonder wijziging van de HMO.
Dus ik noemde je zeker wilt dat je opkijken en dat is omdat we hebben zeker nog niet voorbij deze verdwenen.
Dus om te beginnen laten we kiezen gewoon allemaal label elementen en dan laten we zeggen dat ik niet weet hoe ze in hoofdletters, zonder dat de HMO maken.
Dus laten we trekken Google en doe een onderzoek en dit is iets dat ik zeker eerder had gedaan.
Dus laten we gaan en een zoekopdracht te zien beoordelen hoofdletters kunt u het eerste ding dat opduikt is de tekst te veranderen en de tekst te transformeren het zegt dat het aangeeft hoe om te profiteren van elementen tekst te zien.
Het kan worden gebruikt om de tekst verschijnt in hoofdletters of kleine letters, of met elk woord een hoofdletter.
Dus toen we scroll naar beneden en neem een ​​kijkje op de syntax en het lijkt erop dat we hebben kapitaliseren.
Will kapitalist eerste letter hoofdletters en kleine letters.
Dus willen we hoofdletters.
Dus tekst transformeren hoofdletters.
En wat ik net deed er niet was gewoon om je iets te laten zien is het eigenlijk iets dat ik niet de hele tijd, die op zoek is naar dingen gaat om Google te typen C Ss blah blah blah CSSA hoofdletter C S S transparant wat ik ben op zoek te doen.
En ik kijk gewoon naar de zoekresultaten, omdat er zo veel eigenschappen te herinneren.
Je kunt ze niet allemaal onthouden.
Dus dit is een van de meer obscure degenen.
Zeker.
En als we frissen dit voor labels die hier beneden zijn.
Dus laat me gewoon ontdoen van dat alleen maar om te laten zien onze tijd.
Dit zijn de labels.
En dan voegen we dit in en vernieuw de bovenste cased.
Dus de volgende up hebben we de eerste letter van het element met ID speciale groene en 100 pixel lettergrootte.
Dus om de eerste letter dat is een ander dat we misschien wilt opzoeken SEUS ons eerste letter en te zien wat we krijgen te richten.
Dus het lijkt erop dat er een andere pseudo-selector.
De eerste letter C Ss element selecteert de eerste letter van de eerste regel van een blok.
Dus als je een kijkje nemen een voorbeeld eerste letter.
Laten we doorgaan en proberen.
We willen eerst de brief van die selecteert u de ID speciaal en dan eerst.
En we willen het groen te maken en 100 pixels in lettergrootte zodat kleur groen en de lettergrootte 100 pixels te redden en dat element is hier.
Dus hou een oogje op de eerste letter die we vernieuwen en we krijgen dit reusachtige groene ogen.
Volgende te maken van de H-1 elementen kleur veranderd naar blauw wanneer zweefde boven.
Dus dit is eigenlijk vrij normaal om een ​​soort van effect hebben.
Wanneer u de muisaanwijzer over iets meestal is het vrij subtiel misschien een knop en je de muisaanwijzer op het en er is een kleine schaduw die lijkt erop dat de kleurverschuivingen zeer licht om te kijken als jij een soort van 3-D perspectief naar iets om je gewoon een beetje te geven beetje interactiviteit zonder afgeleid te worden storend.
Dus we gaan naar de H-1 te selecteren en dit is eigenlijk alles elk een.
Maar in dit geval is het slechts één en pseudo-selector is hover en wat we zetten hier wordt alleen toegepast wanneer een gebruiker over het element zweeft.
Dus kleur blauw we besparen.
Hier is onze H-1.
En als ik zweven wordt blauw wanneer ik stop zweven gaat het terug naar wat het eerder had.
Dus eindelijk de elementen die grijs hebben bezocht en toen hij de twee elementen die twee koppelingen eigenlijk zowel links naar Facebook, die links die ik al eerder heb bezocht zijn kunnen zien.
Dat is waarom ze zijn paars Chrome standaard zal maken alle bezochte denkt paars.
Dus laten we een link die ik heb zeker niet geweest vóór en het gewoon gaat om iets te maken te beginnen en ik zal je laten zien de pagina te vernieuwen.
Het is nu blauw.
Want ik ben er niet geweest.
Dus laten we laten het op die manier voor nu ben ik niet van plan om het klikt.
En we willen dat de bezochte om in plaats van paars zijn.
Het spijt me dat we willen dat de bezochte eenmaal om grijs in plaats van paars zijn.
Dus kiezen we een labels de pseudo-selectors genaamd bezocht en daarna gaan we om het grijs te slaan.
En als we vernieuwen.
Houd uw oog op deze hier.
Ik zal het lettertype een beetje groter te maken.
Het is momenteel paars omdat ik er geweest voordat ik vernieuwen.
Nu is het geweldig.
OK dus hoop dat jullie genoten dat de oefening.
Er is veel om daar uit te pakken.
Een heleboel verschillende selectors.
En één ding ik zal toevoegen is dat voor elke oplossing die ik heb of bijna elke één zijn er ten minste één of twee meer manieren om exact dezelfde uitkomst.
Dus als je had iets dat verschilde van mij, maar het werkte nog steeds dat is geweldig.
Voel je vrij om toe te voegen in de commentaren.
Deel het met andere mensen.
Het is volkomen geldig is.
Dit is gewoon de manier waarop ik het zou hebben gedaan.
Een ander ding.
Uiteraard is de site niet bijzonder aantrekkelijk.
Dit is niet een echte site.
We zullen werken aan een echt project heel erg snel in de volgende oefening video.
We daadwerkelijk gaat om een ​​beetje blog site die is een beetje beter ontworpen maken.
Het ziet er veel mooier dan dit.
Dit is slechts een praktijkoefening.