See kirjutis juhendab teid CSS-i sisu muutmise kohta.
Kuidas CSS-is sisu muuta?
CSS-i sisu muutmiseks kasutame järgmisi meetodeid:
Vaatame iga meetodi ükshaaval läbi!
1. meetod: CSS-is sisu muutmiseks kasutage ::after Selector with content Atribuuti
' ::pärast ” valija asetab määratud sisu CSS-i kasutades HTML-elemendi järele sisu ” vara. See toiming aitab valitud elemendile sisu lisada. Lisaks on ' kuva ” atribuuti saab kasutada olemasoleva sisu peitmiseks.
Vaatame allolevat näidet, et mõista, kuidas CSS-is sisu muuta valija ::after abil.
Näide
Siin on meie HTML-leht tekstiga ' Tere hommikust!!! ”. Asendame lisatud sisu:
Praegu oleme lisanud ' ' märgend tekstiga meie HTML-faili kehaosas:
< lk > Tere hommikust!!! < / lk >Oma CSS-failis kasutame nüüd valijat ::after kui ' keha::pärast ” ja kasuta „ sisu ' vara väärtusega ' Tere õhtust ” selle määratluse sees. Selle tulemusena asetab CSS-i valija teksti kohe kirjutatud teksti järele. Lõpuks peitke olemasolev tekst, kasutades ' kuva ' atribuut ja määrake selle väärtuseks ' mitte ühtegi ”:
< stiilis >keha::pärast {
sisu : 'Tere õhtust' ;
}
lk {
kuva: puudub;
}
< / stiilis >
Nüüd salvestage oma HTML-fail ja avage see lihtsalt brauseris või kasutage 'Reaalajas server ” samal eesmärgil:
Nagu näete, on sisu edukalt muudetud, kasutades ::after CSS-i valijat:
2. meetod: CSS-is sisu muutmiseks kasutage ::enne valijat sisu atribuudiga
CSS-is on ' ::enne ” valijat kasutatakse sisu kuvamiseks vahetult enne elemendi olemasolevat sisu. Seda saab kasutada koos ' sisu ” atribuut, et lisada valitud elemendile uus sisu.
Näide
Määrake valija ::before kohe pärast keha kui ' keha::enne ”. See asetab uue sisu olemasoleva sisu ette. Pange tähele, et kõik muud omadused jäävad samaks nagu eelmises näites:
< stiilis >keha::enne {
sisu : 'Tere õhtust' ;
}
lk {
kuva: puudub;
}
< / stiilis >
Väljund
Oleme selgitanud erinevaid meetodeid CSS-i sisu muutmiseks.
Järeldus
Sisu muutmiseks ' ::pärast ” ja „ ::enne ' CSS-i valijaid kasutatakse koos ' sisu ” vara. Esimesel lähenemisel lisatakse määratud tekst pärast valitud elementi, samas kui teine CSS-i valija töötab vastupidiselt. Veelgi enam, ' kuva ” atribuuti saab kasutada elemendi olemasoleva sisu peitmiseks. Nii muudetakse CSS-is sisu täielikult. Oleme käsitlenud kahte CSS-i sisu muutmise meetodit.