CSS gjelder for alle barn
I denne guiden vil vi lære å bruke stil for alle barna i CSS og bruke noen eksempler for å forstå dette konseptet i detalj.
Syntaks:
Element> ElementDet vil velge alle barna til den aktuelle forelderen.
div. klasse> *// Egenskaper til CSS
Det vil velge barna rekursivt.
Eksempel 1: Velge alle barn
Først oppretter vi HTML -filen. Deretter lager vi noen "div" og "spenn" -klasser og skriver noen avsnitt i disse klassene. Vi bruker barnelektoren i CSS og legger til litt stil slik at den vil velge og anvende den stilen på alle barna. I denne guiden bruker vi Visual Studio -koden for demonstrasjon av disse eksemplene. Vi oppretter denne HTML -filen i denne programvaren og skriver HTML -koden. Du må skrive inn følgende kode. “.HTML ”Fil Extension brukes til å lagre denne filen.
Her har vi en "" tag. I denne "" -koden har vi to avsnitt som bruker "
”. Deretter kommer en "" tag. Vi har ett avsnitt i denne taggen. Etter den avsluttende taggen til “” har vi også to andre avsnitt der vi lukker “” -merket. Utenfor denne "div" -merket skriver vi ett avsnitt til. Disse avsnittene vil hjelpe deg å forstå begrepet valg og anvendelse av alle elementer i CSS.
CSS -kode:
CSS -koden gjenspeiles i følgende bilde. Vi koblet denne CSS -filen med HTML -filen vår. All styling vi gjorde her blir brukt på HTML -filen vi opprettet.
Her bruker vi “Div> P” som velger alle avsnitt som er til stede i “Div”. I de krøllete seler bruker vi stilegenskapene som "bakgrunnsfarge" som brukes til å endre bakgrunnsfargen til alle barna til den forelderen "div". Vi setter det som "lyseblå". Denne lyseblå bakgrunnen vil gjelde for alle barna. Vi endrer "fontfamilien" til alle barna ved å bruke CSS -egenskapen og sette den til "Algerie". Denne eiendommen vil gjelde for alle barna. Vi bruker også "tekst-align" CSS-egenskapen og justerer barnas tekst til "senteret".
Produksjon:
Du kan enkelt få utdataene ved å trykke på “Alt+B”. Det gjengir utdataene dine i nettleseren. Du kan enkelt se forskjellen hvordan den velger alle barna og bruker stylingen for disse barna.
Her ser vi at den velger de to første avsnittene, så vel som fjerde og femte avsnitt og bruker stilen på disse avsnittene. Det endrer ikke stilen til tredje og sjette avsnitt siden de ikke er foreldrene til foreldrene “Div”. Tredje ledd er skrevet i "spennet", det er derfor det ikke er barnet til "div". Det sjette avsnittet er skrevet utenfor "div", slik at stylingen ikke brukes på dette avsnittet. Barnetvelgeren velger bare foreldrenes barn som er nevnt i CSS -koden.
Eksempel nr. 2: Velge alle barn rekursivt
For dette eksemplet, hvis HTML -koden er den samme som den forrige koden, setter vi navnet på Div -klassen som "Allchild" og bruker dette navnet i CSS -koden. Vi endrer CSS -koden og velger foreldrenes barn, rekursivt.
I dette eksemplet endrer vi "bakgrunn" -fargen på Div Class Element Children. Her “Div.Allchilld> *”velger alle DIV -klasseelementene som barn av den“ div ”. “*” Velger alle barna i “Div” -klassen som heter “Allchild”. Det endrer fargen på alle barna i Div -klassen til “rosa”
Produksjon:
Her er utgangen der vi brukte “DIV.Allchild> *”-velgeren. Den velger alle foreldrenes barn, rekursivt. Du kan se at det endrer bakgrunnsfargen på alle elementene i Div -klassen til en "rosa" farge.
Eksempel nr. 3: Velge alle barn i CSS
I denne koden bruker vi “” og . I “” har vi tre “” og avsnittet ”
”Inne i dette avsnittet. Vi bruker "" igjen og lukker dette avsnittet ved å bruke "
”. Vi lukker "div" og oppretter et annet spenn som er til stede utenfor "div".CSS -kode:
"Displayet" av "spennet" er satt til "blokkering". Vi bruker barnelektoren som velger alle foreldrenes barn. Det brukes her til å velge alle spenn i Div -klassen, siden “Span” er barnet til foreldrene “Div”. Den velger alle spennelementene i Div og bruker deretter stylingen på alle spennene. Bakgrunnsfargen på alle spennene er satt til “lysegrønn”. "Font-size" av alle "spennene" er satt til "35px". "Font-Family" for alle disse er "Gill Sans". "Font-Weight" er satt til "Fet" og "stilen" er satt til "kursiv". Dette gjelder alle barna.
Produksjon:
Det bruker stilen for alle barna "spenner" til foreldrene "div". Som paragraf 1, 2 og 4 er skrevet i "spennet" i "div", endringer stilen til disse tre avsnittet. Det betyr at barnetvelgeren velger spennet til Div og bruker den forrige stylingen for alle disse barna.
Eksempel 4: Velge alle barn rekursivt
Vi lager "Div -klassen" med navnet "barn". Vi har to spenn, og deretter ett avsnitt, og igjen ett spenn inne i Div. Ett avsnitt er skrevet utenfor Div. Nå velger vi elementene i DIV -klassen rekursivt ved hjelp av CSS -velgeren.
CSS -kode:
Span "display" er "blokk". Deretter har vi “div.Child> *”-velger som velger alle elementene i DIV -klassen som heter“ Child ”ved å bruke“ *”. “*” Velger alle barneelementene. "Bakgrunnsfargen" her til alle barna er "lett laks". Fontfargen er “Blue-Violet”. Familien til skriften vi bruker her er "Times New Roman". Vi bruker også "fontvekt" og setter den til "dristigere". "Font-size" vi bruker er "25px". Nå, sjekk hvordan utgangen ser ut.
De fire første avsnittene er skrevet i DIV -klassen “Child”, og all styling vi brukte i forrige eksempel på CSS -koden, brukes her, som vist på bildet. Den velger alle barneelementene i "barn" -klassen "div" og bruker stilene på disse elementene.
Konklusjon
Vi brukte barnelektoren i denne guiden og forklarte hvordan du velger alle barn i CSS. Vi forklarte også hvordan vi bruker stilene på alle barna til den utvalgte foreldrene. Vi lærte hvordan du velger alle barna til en valgt forelder og velger alle barna rekursivt ved hjelp av CSS Child Selector. I denne guiden utforsket vi fire forskjellige eksempler. Vi utførte alle eksempler og viste disse kodene og utgangene i denne guiden. Vi forventer at du vil lære dette konseptet etter å ha lest denne guiden nøye og etter å ha utført disse eksemplene på egen hånd.