Dokončni vodnik po psevdo-razredih CSS
Ne glede na to, ali ste začetnik ali izkušen CSS razvijalec, ste verjetno že slišali psevdo-razredi. Najbolj znani psevdo-razred je verjetno : hover, ki nam omogoča slog elementa, ko je v stanju lebdenja, ko je kazalna naprava, kot je miš, obrnjena proti njej.
Po konceptu naših prejšnjih objav na robovih: auto in CSS Floats, poglobljeno poglobimo psevdo-razrede v tem delu. Bomo videli kakšni so psevdo-razredi, kako delujejo, kako jih lahko kategoriziramo, in kako se razlikujejo od psevdoelementov.
Kaj so psevdoklasi?
Psevdo-razred je ključna beseda, ki jo lahko dodamo selektorjem CSS, da bi določiti posebno stanje pripadajočega elementa HTML. Psevdo-razred lahko dodate selektorju CSS z uporabo sintaksa dvopičja : Všečkaj to: a: hover …
Razred CSS je atribut, ki ga lahko dodamo elementom HTML, za katere želimo uporabiti enaka pravila za slog, kot so zgornji elementi menija ali naslovi pripomočkov v stranski vrstici. Z drugimi besedami, lahko uporabljamo CSS razrede za združite ali razvrstite elemente HTML enake ali podobne.
Psevdo-razredi so jim podobni v smislu, da so tudi uporabijo za dodajanje stilskih pravil elementom, ki si delijo isto lastnost.
Toda medtem ko so resnični razredi uporabnik definiran in lahko opazite v izvorni kodi, na primer The delo rednih razredov CSS je do razvrščanje ali skupinske elemente. Razvijalci vedo, kako naj bodo njihovi elementi združeni: oblikujejo lahko razrede, kot so "menu-items", "buttons", "thumbnails", itd. Te klasifikacije temeljijo na značilnostih elementov, ki so sami razvijalci. Na primer, če se razvijalec odloči za uporabo a HTML elementi pa imajo njihove skupne značilnosti glede na njihovo stanje, položaj, naravo in interakcijo s stranjo in uporabnikom. To so značilnosti, ki so ne običajno označena v kodi HTML, ampak lahko jih usmerite s psevdo-razredi v CSS, na primer: To so vrste lastnosti, ki so običajno usmerjene v psevdo razrede. Da bi bolje razumeli razliko med razredi in psevdo-razredi, predpostavimo, da uporabljamo razred Te zadnje podrejene elemente lahko slogamo s tem CSS: Toda kaj se zgodi, ko se spremeni zadnji element? No, premakniti moramo Ta težavnost razrede posodabljanja lahko prepustite uporabniškemu agentu, vsaj za tiste značilnosti, ki so skupne elementom (in je zadnji element tako pogost, kot ga lahko dobimo). Ob vnaprej določen Obstaja veliko različnih vrst psevdo-razredov, vsi nam ponujajo načine za ciljanje elementov na podlagi njihovih funkcij, ki so sicer nedostopne ali težje dostopne. Tukaj je seznam standardnih psevdo razredov v MDN. Dinamični psevdo-razredi se dodajo in odstranijo iz elementov HTML dinamično, temeljijo na stanju, v katerega prehajajo kot odgovor na interakcije uporabnika. Nekateri primeri dinamičnih psevdo-razredov so Državni psevdo-razredi se dodajo elementom, ko so v določenem statičnem stanju. Nekateri od najbolj znanih primerov so: Najbolj priljubljen državni psevdo-razred mora biti Strukturni psevdo-razredi razvrščajo elemente na osnovi njihovem položaju v strukturi dokumenta. Njeni najpogostejši primeri so Obstajajo tudi razni psevdo-razredi, ki jih je težko razvrstiti, kot so: Ena najtežjih stvari pri psevdo-razredih je verjetno razumevanje razlike med Oba sta strukturna psevdo-razreda in označujeta poseben element znotraj nadrejenega elementa (posoda), vendar na drugačen način. Predpostavimo n potem je 2 Oglejmo si primer. Poglejmo, kako ta kratki CSS oblikuje HTML v dveh različnih primerih. V primeru 1 se drugi element znotraj a Ampak, če starševski element ne imajo drugi odstavek V našem primeru Odstavek 1, Otrok 1 Odstavek 2, Otrok 3 V drugem primeru premaknemo neurejeni seznam na tretje mesto, drugi odstavek pa pred njim. To pomeni, da sta oba Odstavek 1, Otrok 1 Odstavek 2, Otrok 2 Če želite prebrati več o razlikah med Ko govorimo o psevdo-razredih, je pomembno tudi razumeti kako se razlikujejo od psevdoelementov, da jih ne bi mešali. Toda medtem ko uporabljamo psevdo-razrede za izbiro elementov HTML, ki v drevesu dokumenta psevdoelementi nam omogočajo, da ciljno usmerimo elemente običajno ne obstajajo v DOM, sploh (npr Obstaja tudi a razlika v skladnji. Psevdoelementi so ponavadi identificirani z dvojnimi kolonami To lahko privede do zmede, saj so v CSS2 psevdoelementi označeni z enim dvopičjem, brskalniki pa še vedno sprejemajo eno sintakso dvopičja za psevdoelemente.. Obstajajo tudi razlike med psevdo-razredi in psevdoelementi v način, kako jih lahko usmerimo na CSS. Psevdoelementi se lahko pojavijo samo po zaporedje selektorjev, medtem ko se psevdo-razredi lahko postavijo kjerkoli v zaporedju selektorjev CSS. Na primer, lahko ciljate na zadnjo postavko seznama elementov seznama ALI Prvo zaporedje izbirnika izbere zadnjega otroka znotraj Poskusimo narediti nekaj podobnega s psevdoelementi. Zgornja koda CSS je veljavna in prikaže se besedilo "rdeče" po Ta koda na drugi strani pa ne bo delovala, kot mi ne more spremeniti položaja psevdoelementa znotraj izbirnega zaporedja. Poleg izbirnika se lahko prikaže samo en psevdoelement, medtem ko so psevdo-razredi se lahko kombinirajo med seboj če je kombinacija smiselna. Na primer, za ciljanje prvih podrejenih elementov, ki so prav tako samo za branje, lahko ustvarimo kombinacijo psevdo-razredov Izbirna koda z a Pomembno je vedeti to so ne Psevdoklasi CSS jQuery. Imenujejo se jQuery izbirne razširitve. Razširitvena izbira jQuery vam omogoča ciljne elemente HTML s preprostejšimi ključnimi besedami. Večina je kombinacija več običajnih CSS selektorjev, ki so predstavljeni z eno samo ključno besedo.Namen psevdoklasov
.zadnji za identifikacijo zadnjih elementov v različnih nadrejenih zabojnikih.
li.last besedilna transformacija: velika beseda; option.last font-style: italic;
.zadnji od prejšnjega zadnjega elementa do trenutnega.: zadnji otrok psevdo-razred je zelo koristen. Tako bomo ni treba označevati zadnjega elementa v HTML-kodi, vendar jih lahko še vedno oblikujemo z naslednjim CSS: li: zadnji otrok text-transform: velika beseda; možnost: zadnji otrok font-style: italic;
Glavne vrste psevdo-razredov
1. Dinamični psevdoklasi
: hover, : fokus, : povezava, in : obiskano, vse je mogoče dodati v sidrna oznaka. a: obiskano color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Državni psevdo-razredi
: označeno ki jih lahko uporabite za potrditvena polja ():celozaslonski način za ciljanje katerega koli elementa, ki je trenutno prikazan v celozaslonskem načinu:onemogočeno za elemente HTML, ki so lahko v onemogočenem načinu, na primer , , in . : označeno, ki označuje, ali je potrditveno polje označeno ali ne. .potrditveno polje: označeno + oznaka font-style: italic; vhod: onemogočen background-color: #EEEEEE;
3. Strukturni psevdo-razredi
: prvi otrok, : zadnji otrok, in : nth-child (n) - vse je mogoče uporabiti za ciljanje specifičnega podrejenega elementa znotraj vsebnika glede na njegov položaj - in : root ki cilja na nadrejeni nadrejeni element v DOM. 4. Razni psevdoklasi
: ne (x) ki izbere elemente, ki se ne ujemajo z izbirnikom x: lang (jezikovna koda) ki izbere elemente, katerih vsebina je v določenem jeziku: dir (usmerjenost) ki izbere elemente z vsebino določene smeri (od leve proti desni ali od desne proti levi). p: lang (ko) barva ozadja: # FFFF00; : root barva ozadja: # FAEBD7;
n-otrok vs vrste Psevdoklasi
: n-otrok in : nth-of-type psevdo-razredi.: n-ti otrok (n) cilje na element, ki je drugega otroka nadrejenega elementa, in : nth-of-type (n) cilje drugi med enake vrste elementa (kot so odstavki) znotraj nadrejenega elementa. / * odstavek, ki je tudi drugi otrok v svojem nadrejenem elementu * / p: nth-child (2) color: # 1E90FF; // lightblue / * drugi odstavek znotraj matičnega elementa * / p: nth-of-type (2) font-weight: bold;
Primer 1
nth-child (2) pravilo se ne nanaša nanj. Čeprav je drugi otrok, je ne odstavek. nth-of-type (2) velja pravilo, saj to pravilo išče samo elementov, in ne skrbi za druge vrste elementov (kot so neurejeni seznami) znotraj nadrejenega elementa.nth-of-type (2) pravilo bo oblikovalo drugi odstavek, ki je otrok 3.
Neurejen seznam 1, otrok 2
Primer 2
: nth-child (2) in : nth-of-type (2) pravila, saj je drugi odstavek tudi drugi otrok svojega starša
Neurejen seznam 1, otrok 3
: n-ti otrok in : nth-of-type psevdo-razredi, CSS Tricks ima veliko mesto na njem. Če uporabljate SASS, vam lahko Family.scss pomaga ustvariti zapletene n-otrok'spremenjenem elementi.Psevdoklasi vs psevdoelementi
Psevdoelementi, kot naprimer :: pred in :: po (glej tudi ta navodila o tem, kako jih uporabljati) dodali uporabniški agenti, in lahko so ciljno usmerjeni in oblikovani s CSS prav tako kot psevdo-razredi. :: pred in :: po) ali samo kot določene dele obstoječih elementov (npr :: prva črka ali :: ograda). ::, ker se psevdo-razredi identificirajo z eno debelo črevo :.1. Njihovo mesto v zaporedju CSS selektorja
ul>: last-child.red barva: # B0171F;
ul> .red: zadnji otrok barva: # B0171F;
.rdeča), druga pa izbere zadnjega otroka med elementi, ki imajo .rdeča razred znotraj ul> .red :: after display: block; vsebina: „rdeča“; barva: # B0171F;
predmetov v razredu .rdeča. ul> :: after.red display: block; vsebina: „rdeča“; barva: # B0171F;
2. Število pojavov v zaporedju selektorjev
: prvi otrok in :le za branje na naslednji način: \ t : prvi otrok: samo za branje color: #EEEEEE;
jQuery izbirne razširitve
: Sintaksa ne predstavlja vedno ustreznega psevdoklasa CSS. Če ste že uporabljali jQuery, ste morda uporabili veliko njegovih selektorjev : sintakso $ (': potrditveno polje'), $ (': input') in $ (': selected'). / * Spreminjanje pisave vseh elementov HTML, povezanih z vnosom, kot so gumb, izbira in vnos * / $ (": input") .css ("družina pisav", "kurirska nova")
