Kuidas sihtida CSS-klassi teises CSS-klassis

”. Seejärel määrake edasiseks kasutamiseks klassi atribuut.

2. samm: looge pesastatud 'div' konteinerid

Järgmisena looge pesastatud div-konteinerid, järgides 1. sammus kirjeldatud protseduuri.

< div klass = 'põhisisu' >

< div klass = 'laud' >

< div klass = 'rida' >

< div klass = 'c-vasak' > Abielluda < / div >

< div klass = 'c-parem' > Jack < / div >

< div klass = 'c-vasak' > Tom < / div >

< div klass = 'c-parem' > juulil < / div >

< / div >

< / div >

< / div >

Väljund

---

---

3. toiming: rakendage põhikonteinerile stiilid

Juurdepääs peamisele ' div ' konteiner klassi nimega ' .põhisisu ”:

.põhisisu {

laius : 40% ;

marginaal : 0 auto ;

värvi : sinine ;

piir : 2 pikslit täpiline sinine ;

teksti joondamine : Keskus ;

}

Siin:

• “ laius ” määrab elemendi laiuse suuruse.
• “ marginaal ” eraldab elemendi ümber ruumi väljaspool määratletud piiri.
• “ värvi ” määrab elemendis lisatud teksti värvi.
• “ piir ” määrab HTML-is elemendi ümber kontuuri või piiri.
• “ Teksti joondamine ” määrab elemendi teksti joonduse.

4. samm: kujundage teine ​​klass

Juurdepääs CSS-i põhiklassile ja teistele pesastatud klassidele, kasutades nende nimesid. Seejärel määrake konteineri laius, määrates väärtuse vastavalt oma valikule:

.põhisisu .tabel {

laius : 80% ;

}

Lisaks pääsete juurde teisele klassile, järgides ülaltoodud protseduuri ja rakendage allolevas koodilõigul mainitud CSS-i atribuute:

.põhisisu .c-parem {

kuva : inline-plokk ;

fondi suurus : 20 pikslit ;

}

Ülaltoodud koodilõigu järgi:

• “ kuva ” atribuuti kasutatakse elemendi kuvamise seadistamiseks.
• “ fondi suurus ” määrab konteinerisse lisatava teksti suuruse.

Nüüd pääsete sama meetodi abil juurde teistele klassidele ja rakendage järgmisi CSS-i atribuute, nagu allpool mainitud:

.põhisisu .c-vasak {

laius : 140 pikslit ;

margin-parem : 6 pikslit ;

fondi suurus : 16 pikslit ;

}

Selleks rakendame ' laius ”, „ margin-parem ” ja „ fondi suurus ” stiilimise eesmärgil.

Lisaks pääsete juurde peamisele ' div ” konteiner koos teiste pesastatud div-konteineritega, kasutades nende klassi nime ja rakendades järgmisi CSS-i atribuute

.main .c-parem {

laius : auto ;

fondi suurus : 15 pikslit ;

värvi : #fff ;

margin-parem : 20 pikslit ;

font-weight : normaalne ;

}

Väljund

See kõik puudutab CSS-klassi sihtimist teises CSS-klassis.

Järeldus

CSS-klassi sihtimiseks teises CSS-klassis avage esmalt peamine ' div ” määratud klassiatribuudi kaudu. Seejärel avage sama toimingut järgides teisele „div” konteinerile. Lisaks saavad kasutajad sihtida CSS-klassi teistes CSS-klassides. See postitus on näidanud meetodit CSS-klassi sihtimiseks teises CSS-klassis.