Sådan målretter du en CSS-klasse inde i en anden CSS-klasse

”. Tildel derefter en klasseattribut til videre brug.

Trin 2: Lav indlejrede 'div'-beholdere

Lav derefter indlejrede div-beholdere ved at følge samme procedure i trin 1:

< div klasse = 'hovedindhold' >

< div klasse = 'bord' >

< div klasse = 'række' >

< div klasse = 'c-venstre' > Gifte < / div >

< div klasse = 'c-højre' > Jack < / div >

< div klasse = 'c-venstre' > Tom < / div >

< div klasse = 'c-højre' > juli < / div >

< / div >

< / div >

< / div >

Produktion

---

---

Trin 3: Påfør styling på 'div' hovedbeholder

Få adgang til de vigtigste ' div ' container ved hjælp af klassenavn som ' .main-indhold ”:

.main-indhold {

bredde : 40 % ;

margen : 0 auto ;

farve : blå ;

grænse : 2px prikket blå ;

tekstjustering : centrum ;

}

Her:

• “ bredde ” angiver elementets breddestørrelse.
• “ margen ” allokerer plads omkring elementet uden for den definerede grænse.
• “ farve ” definerer farven for den tilføjede tekst i elementet.
• “ grænse ” definerer en disposition eller grænse omkring elementet i HTML.
• “ Tekstjustering ” definerer justeringen af ​​elementets tekst.

Trin 4: Style en anden klasse

Få adgang til CSS-hovedklassen og andre indlejrede klasser ved at bruge deres navne. Indstil derefter beholderens bredde ved at angive værdien i henhold til dit valg:

.main-indhold .bord {

bredde : 80 % ;

}

Få adgang til den anden klasse ved at følge samme procedure som ovenfor og anvende CSS-egenskaberne nævnt i nedenstående kodestykke:

.main-indhold .c-højre {

Skærm : inline-blok ;

skriftstørrelse : 20 px ;

}

Ifølge ovenstående kodestykke:

• “ Skærm ” egenskab bruges til at indstille visningen af ​​et element.
• “ skriftstørrelse ” angiver størrelsen på den tekst, der tilføjes i beholderen.

Få nu adgang til de andre klasser ved at bruge den samme metode og anvend følgende CSS-egenskaber som nævnt nedenfor:

.main-indhold .c-venstre {

bredde : 140 px ;

margin-højre : 6px ;

skriftstørrelse : 16 px ;

}

For at gøre det, vil vi anvende ' bredde ', ' margin-højre ' og ' skriftstørrelse ” til stylingformål.

Få desuden adgang til de vigtigste ' div ”-beholder sammen med andre indlejrede div-beholdere ved at bruge deres klassenavn og anvende følgende CSS-egenskaber

.main .c-højre {

bredde : auto ;

skriftstørrelse : 15 px ;

farve : #fff ;

margin-højre : 20 px ;

skrifttype-vægt : normal ;

}

Produktion

Det handler om at målrette en CSS-klasse inde i en anden CSS-klasse.

Konklusion

For at målrette mod en CSS-klasse inden for en anden CSS-klasse, skal du først få adgang til hoved ' div ” gennem den tildelte klasseattribut. Få derefter adgang til en anden 'div'-beholder ved at følge samme procedure. Desuden kan brugere målrette mod en CSS-klasse inden for en anden CSS-klasse. Dette indlæg har demonstreret metoden til at målrette en CSS-klasse inden for en anden CSS-klasse.