Šis rašymas padės jums pakeisti CSS turinį.
Kaip pakeisti turinį CSS?
Norėdami pakeisti CSS turinį, naudosime šiuos metodus:
Išnagrinėkime kiekvieną metodą po vieną!
1 būdas. Norėdami pakeisti CSS turinį, naudokite ::po parinkiklio su turinio nuosavybe
„ ::po “ parinkiklis įdeda nurodytą turinį po HTML elemento, naudodamas CSS “ turinys ' nuosavybė. Ši operacija padeda pridėti turinį prie pasirinkto elemento. Be to, „ ekranas “ nuosavybė gali būti naudojama esamam turiniui paslėpti.
Pažvelkime į toliau pateiktą pavyzdį, kad suprastume, kaip pakeisti turinį CSS naudojant ::after parinkiklį.
Pavyzdys
Čia yra mūsų HTML puslapis su tekstu ' Labas rytas!!! “. Pakeiskime pridėtą turinį:
Šiuo metu mes pridėjome „ “ žyma su tekstu mūsų HTML failo turinio dalyje:
< p > Labas rytas!!! < / p >Savo CSS faile dabar naudosime :: po parinkiklį kaip „ kūnas:: po “ ir naudokite „ turinys „turtas, kurio vertė“ Labas vakaras “ jo apibrėžime. Dėl to CSS parinkiklis patalpins tekstą iškart po parašyto teksto. Galiausiai paslėpkite esamą tekstą naudodami „ ekranas “ nuosavybę ir nustatykite jos vertę į „ nė vienas “:
< stilius >kūnas:: po {
turinys : 'Labas vakaras' ;
}
p {
ekranas: nėra;
}
< / stilius >
Dabar išsaugokite HTML failą ir tiesiog atidarykite jį naršyklėje arba naudokite „Tiesioginis serveris “ tam pačiam tikslui:
Kaip matote, turinys buvo sėkmingai pakeistas naudojant ::after CSS parinkiklį:
2 būdas: Norėdami pakeisti CSS turinį, naudokite ::prieš parinkiklį su turinio nuosavybe
CSS sistemoje „ ::prieš “ parinkiklis naudojamas, kad turinys būtų rodomas prieš esamą elemento turinį. Jis gali būti naudojamas kartu su ' turinys “ ypatybę, kad pridėtumėte naują turinį į pasirinktą elementą.
Pavyzdys
Nurodykite ::prieš parinkiklį iškart po kūno kaip ' kūnas::prieš “. Taip naujas turinys bus pateiktas prieš esamą turinį. Atminkite, kad visos kitos savybės išlieka tokios pačios, kaip ir ankstesniame pavyzdyje:
< stilius >kūnas::prieš {
turinys : 'Labas vakaras' ;
}
p {
ekranas: nėra;
}
< / stilius >
Išvestis
Mes paaiškinome įvairius būdus, kaip pakeisti turinį CSS.
Išvada
Norėdami pakeisti turinį, „ ::po “ ir „ ::prieš CSS parinkikliai naudojami su turinys ' nuosavybė. Pirmuoju metodu nurodytas tekstas pridedamas po pasirinkto elemento, o antrasis CSS parinkiklis veikia priešingai. Be to, „ ekranas ypatybę galima panaudoti norint paslėpti esamą elemento turinį. Taip turinys visiškai pakeičiamas CSS. Apžvelgėme du CSS turinio keitimo būdus.