CSS-luokan kohdistaminen toisen CSS-luokan sisällä

”. Varaa sitten luokkaattribuutti myöhempää käyttöä varten.

Vaihe 2: Tee sisäkkäisiä 'div'-säiliöitä

Tee seuraavaksi sisäkkäisiä div-säilöjä noudattamalla samaa vaihetta 1:

< div luokkaa = 'pääsisältö' >

< div luokkaa = 'pöytä' >

< div luokkaa = 'rivi' >

< div luokkaa = 'c-vasen' > Naida < / div >

< div luokkaa = 'c-oikea' > Jack < / div >

< div luokkaa = 'c-vasen' > Tom < / div >

< div luokkaa = 'c-oikea' > heinäkuu < / div >

< / div >

< / div >

< / div >

Lähtö

---

---

Vaihe 3: Käytä tyyliä 'div'-pääsäiliössä

Pääsy pääsivulle div ' kontti luokan nimen avulla ' .main-content ':

.main-content {

leveys : 40 % ;

marginaali : 0 auto ;

väri : sininen ;

rajaa : 2px pilkullinen sininen ;

tekstin tasaus : keskusta ;

}

Tässä:

• ' leveys ” määrittää elementin leveyden koon.
• ' marginaali ” varaa tilaa elementin ympärille määritellyn rajan ulkopuolella.
• ' väri ” määrittää elementtiin lisätyn tekstin värin.
• ' rajaa ” määrittää ääriviivat tai rajat elementin ympärille HTML:ssä.
• ' Tekstin tasaus ” määrittää elementin tekstin tasauksen.

Vaihe 4: Muotoile toinen luokka

Pääset CSS-pääluokkaan ja muihin sisäkkäisiin luokkiin niiden nimien avulla. Aseta sitten säiliön leveys määrittämällä arvo valintasi mukaan:

.main-content .pöytä {

leveys : 80 % ;

}

Lisäksi pääset toiseen luokkaan noudattamalla samaa menettelyä kuin yllä ja käytät alla olevassa koodinpätkässä mainittuja CSS-ominaisuuksia:

.main-content .c-oikea {

näyttö : inline-lohko ;

Fonttikoko : 20px ;

}

Yllä olevan koodinpätkän mukaan:

• ' näyttö ” -ominaisuutta käytetään elementin näytön asettamiseen.
• ' Fonttikoko ” määrittää säilöön lisätyn tekstin koon.

Siirry nyt muihin luokkiin käyttämällä samaa menetelmää ja käytä seuraavia CSS-ominaisuuksia alla mainitulla tavalla:

.main-content .c-vasen {

leveys : 140 pikseliä ;

marginaali-oikea : 6px ;

Fonttikoko : 16px ;

}

Tätä varten käytämme ' leveys ”, “ marginaali-oikea ' ja ' Fonttikoko ” muotoilutarkoituksiin.

Lisäksi pääset pääsivulle div ”-konttia muiden sisäkkäisten div-säilöjen kanssa käyttämällä niiden luokan nimeä ja käyttämällä seuraavia CSS-ominaisuuksia

.main .c-oikea {

leveys : auto ;

Fonttikoko : 15 kuvapistettä ;

väri : #F F F ;

marginaali-oikea : 20px ;

fontin paino : normaali ;

}

Lähtö

Siinä on kyse CSS-luokan kohdistamisesta toisen CSS-luokan sisällä.

Johtopäätös

Jos haluat kohdistaa CSS-luokkaan toisessa CSS-luokassa, avaa ensin pää ' div ” määritetyn luokkaattribuutin kautta. Siirry sitten toiseen 'div'-säiliöön noudattamalla samaa menettelyä. Lisäksi käyttäjät voivat kohdistaa CSS-luokkaan toisen CSS-luokan sisällä. Tämä viesti on osoittanut menetelmän kohdistaa CSS-luokkaan toisessa CSS-luokassa.