CSS Pseudo-klasside lõplik juhend
Kas olete algaja või kogenud CSS arendaja, olete ilmselt kuulnud pseudo-klassid. Kõige tuntum pseudoklass on tõenäoliselt :hõljuma, mis võimaldab meil stiili kujundada hover olekus, see tähendab, et sellele suunatakse osuti, näiteks hiir.
Järgides meie varasemate ametikohtade kontseptsiooni: auto ja CSS Floats, vaatleme selle postituse pseudo-klasse lähemalt. Eks me näe mis pseudo-klassid tegelikult on, kuidas nad töötavad, kuidas neid kategoriseerida ja kuidas nad erinevad pseudoelementidest.
Mis on pseudoklassid?
Pseudo-klass on märksõna, mida saame lisada CSS-i valijatele, et määratleda eriline olek kuuluva HTML-elemendi kohta. Me võime CSS-valijale lisada pseudo-klassi kasutades käärsoole süntaks : nagu nii: a: hover …
CSS-klass on atribuut, mida me võime lisada HTML-elementidele, mida me soovime kohaldada samade stiilieeskirjade suhtes, nagu ülemise menüü elemendid või külgriba vidinate pealkirjad. Teisisõnu saame kasutada CSS-klasse rühmitada või liigitada HTML-elemente mis on ühel või teisel viisil sarnased.
Pseudo-klassid on neile sarnased selles mõttes, et nad on ka kasutatakse stiilieeskirjade lisamiseks elementidele, millel on sama omadus.
Aga kui tõelised klassid on kasutaja määratud ja saab lähtekoodi näha, näiteks The regulaarsete CSS klasside töö on klassifitseerida või grupeerida elemente. Arendajad teavad, kuidas nende elemente rühmitatakse: nad võivad moodustada rühmadesse nagu "menüüelemendid", "nupud", "pisipildid" jne. Need klassifikatsioonid põhinevad elementide omadustel arendajad ise. Näiteks kui arendaja otsustab kasutada a HTML-elementidel on siiski olemas nende ühised omadused lähtudes nende olekust, positsioonist, olemusest ja interaktsioonist lehe ja kasutajaga. Need on need omadused, mis on mitte tavaliselt on see märgitud HTML-koodis, kuid me saame sihtida neid pseudo-klassidega CSS-is, näiteks: Need on sellised omadused, mida pseudo-klassid üldiselt suunavad. Klasside ja pseudo-klasside vahelise erinevuse paremaks mõistmiseks eeldame, et kasutame klassi Saame neid viimaseid lapse elemente kujundada järgmise CSS-iga: Aga mis juhtub, kui viimane element muutub? Noh, me peame liikuma See probleem värskendusklasse võib jätta kasutajaagentuurile, vähemalt nende tunnuste puhul, mis on ühised elementide vahel (ja viimane element on sama levinud, kui see on). Võttes eelnevalt määratletud Pseudo-klasse on palju erinevaid, mis kõik annavad meile viise, kuidas sihtida elemente nende omaduste alusel, mis on muidu ligipääsmatuks või keerulisemaks juurdepääsuks. Siin on nimekiri standardsetest pseudo klassidest MDN-is. Dünaamilised pseudo-klassid lisatakse HTML-elementidest ja eemaldatakse neist dünaamiliselt, põhinedes riigile, kuhu nad muutuvad vastuseks kasutaja interaktsioonidele. Mõned dünaamiliste pseudo-klasside näited on Riiklikel pseudoklassidel lisatakse elemendid, kui need on konkreetses staatilises olekus. Mõned selle kõige tuntumad näited on: Kõige populaarsem riigipõhine pseudo-klass peab olema Struktuursed pseudo-klassid liigitavad elemente nende positsiooni dokumendistruktuuris. Selle kõige levinumad näited on On ka mitmesuguseid pseudo-klasse, mida on raske liigitada, näiteks: Üks raskemaid asju pseudo-klassides on ilmselt mõista erinevust Mõlemad on struktuursed pseudo-klassid ja märk konkreetne element emaelemendi sees (konteiner), kuid erinevalt. Oletame n on siis 2 Vaatame näite. Vaatame, kuidas see lühike CSS kujundab HTML-i kahel erineval juhul. Juhtumil 1 on teine element a Aga kui vanemelement ei on teine lõik Meie näites on Lõige 1, laps 1 Lõige 2, laps 3 Teisel juhul liigume järjestamata nimekirja kolmandasse kohta ja teine lõik tuleb selle ette. See tähendab, et nii Lõige 1, laps 1 Lõige 2, laps 2 Kui soovite rohkem lugeda erinevustest Kui räägime pseudo-klassidest, on oluline mõista kuidas nad erinevad pseudoelementidest, et neid mitte segada. Aga kui me kasutame HTML-elementide valimiseks pseudo-klasse olemas dokumendipuus lihtsalt ei märgita eraldi, pseudo-elemendid võimaldavad meil neid elemente sihtida ei ole tavaliselt olemas DOMis, kas üldse (nt Seal on ka a süntaksi erinevus. Pseudoelemente identifitseeritakse üldiselt kahekordse kooloniga See võib põhjustada segadust nagu CSS2, pseudo-elemendid märgiti ka ühe kooloniga - brauserid aktsepteerivad ikka veel ühe käärsoole süntaksi pseudoelementide jaoks. Samuti on erinevused pseudo-klasside ja pseudoelementide vahel kuidas me saame neid CSS-iga sihtida. Pseudoelemente saab kuvada ainult pärast seda selektorite jada, samas kui pseudo-klasse võib paigutada CSS-i selektorjärjestusse. Näiteks saate märkida nimekirja elemendi viimase loendi elemendi VÕI Valija esimene järjestus valib viimase lapse Proovime teha pseudoelementidega midagi sarnast. Ülaltoodud CSS-kood on kehtiv ja ilmub tekst "punane" pärast seda the See kood aga ei tööta, nagu me ei saa pseudoelemendi asukohta muuta valijajärjestuse sees. Samuti võib selektori kõrval ilmuda ainult üks pseudoelement, samas kui pseudo-klassid saab omavahel kombineerida kui kombinatsioon on mõttekas. Näiteks selleks, et sihtida esimesi lapse elemente, mis on ka ainult lugemiseks, saame luua pseudo-klasside kombinatsiooni Valikukood a-ga On oluline seda teada need on mitte CSS pseudo-klassid mis on suunatud jQueryle. Neid nimetatakse jQuery valikulaienditeks. jQuery valikulaiendid võimaldavad teil sihtige HTML-elemente lihtsamate märksõnadega. Enamik neist on kombinatsioonid mitmest tavalisest CSS-selektorist, mis on esindatud ühe märksõnaga.Pseudoklasside eesmärk
.viimane identifitseerida viimased elemendid erinevates vanemkonteinerites.
li.last text-transform: suurtähted; option.last font-style: kursiiv;
.viimane klass eelmisest viimasest elemendist praegusesse.:viimane laps pseudo-klass on tõesti väga kasulik. Nii, me ei pea viimast elementi näitama HTML-koodis, kuid me saame neid siiski kujundada järgmise CSS-iga: li: last-child text-transform: suurtähted; variant: last-last font-style: kursiiv;
Pseudoklasside peamised tüübid
1. Dünaamilised pseudoklassid
:hõljuma, : fookus, :link, ja : külastatud, mis kõik saab lisada ankur silt. a: külastatud värv: # 8D20AE; . nupp: hover, .button: fookus font-weight: bold;
2. Riiklikud pseudoklassid
: kontrollitud mida saab kasutada märkeruududeks ():Täisekraan sihtida mis tahes elementi, mida praegu kuvatakse täisekraanirežiimis: keelatud HTML-elementide puhul, mis võivad olla keelatud režiimis, näiteks , , ja . : kontrollitud, mis tähistab, kas märkeruut on kontrollitud või mitte. .märkeruut: märgitud + silt font-style: kaldkiri; sisend: keelatud taustavärv: #EEEEEE;
3. Struktuursed pseudoklassid
: esimene laps, :viimane laps, ja : n-laps (n) - kõiki saab kasutada konkreetse lapse elemendi sihtimiseks konteinerisse selle asukoha alusel - ja : root mis on suunatud DOMi kõrgeima emaelemendiga. 4. Mitmesugused pseudoklassid
: mitte (x) mis valib elemendid, mis ei vasta valikule x: lang (keelekood) mis valib elemendid, mille sisu on konkreetses keeles: dir (suund) mis valib elemendid, mille sisu on kindla suunaga (vasakult paremale või paremale vasakule). p: lang (ko) taustavärv: # FFFF00; : root taustavärv: # FAEBD7;
n-laps vs nth tüüp Pseudo-klassid
: n. laps ja : n-nda-tüüpi pseudo-klassid.: n-s-laps (n) sihib elementi, mis on tema vanema elemendi teine laps, ja : n-nda-tüüpi (n) eesmärgid teine seas sama tüüpi elementi (näiteks lõiked) emaelemendi sees. / * lõik, mis on ka teine laps vanema elemendi sees * / p: n-laps (2) värv: # 1E90FF; // lightblue / * teine lõik vanemelemendi sees * / p: nth-of-type (2) font-weight: bold;
1. juhtum
n-laps (2) reegel ei kehti. Kuigi see on teine laps, see on mitte lõik. nth-of-type (2) reegel kehtib, kuna see reegel otsib ainult elemente ja ei hooli muudest tüübid elementide (näiteks järjekorras olevate nimekirjade) sisestamine emaelemendi sees.nth-of-type (2) reegel kujundab teise lõigu, mis on laps 3.
Järjestamata nimekiri 1, laps 2
2. juhtum
: n-laps (2) ja : n-nda-tüüpi (2) rakendatakse eeskirju, kuna teine lõik on ka tema vanema teine laps
Järjestamata nimekiri 1, laps 3
: n-s-laps ja : n-nda-tüüpi pseudo-klassid, CSS trikid on suur postitus. Kui kasutate SASS-i, võivad Family.scss aidata teil luua keerulisi n-laps"südamikuga elemendid.Pseudo-klassid vs Pseudo-Elements
Pseudoelemendid, nagu näiteks :: enne ja :: pärast (vt ka seda, kuidas neid kasutada) kasutajaagendid, ja neid saab CSS-iga sihtida ja kujundada samuti, nagu pseudo-klassid. :: enne ja :: pärast) või ainult olemasolevate elementide teatud osadena (nt :: esimene täht või :: kohahoidja). ::, arvestades, et pseudoklassid on identifitseeritud ühe käärsoolega :.1. Nende koht CSS-i selektori järjestuses
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.punane) ja teine valib viimase lapse elementide vahel, millel on .punane klassi sees ul> .red :: pärast kuva: plokk; sisu: „punane”; värv: # B0171F;
klassiga .punane. ul> :: after.red kuva: plokk; sisu: „punane”; värv: # B0171F;
2. Valikute järjestuses esinevate sündmuste arv
: esimene laps ja :Loe ainult järgmisel viisil: : esimene laps: ainult lugemiseks color: #EEEEEE;
jQuery valikulaiendid
: süntaks ei ole alati õige CSS-pseudo-klass. Kui olete kunagi kasutanud jQuery-d, siis oleksite võinud kasutada palju selle valikuid : süntaks $ (': märkeruut'), $ (': sisend') ja $ (': valitud'). / * Kõigi sisendiga seotud HTML-elementide, nagu nupp, valimine ja * / $ (": input") .css ("font-family", "courier new") fontide muutmine
