Galutinis CSS Pseudo klasių vadovas
Nesvarbu, ar esate naujokas ar patyręs CSS kūrėjas, tikriausiai girdėjote pseudo klasės. Geriausiai žinoma pseudo klasė : Pakimba, kuris leidžia mums stiliaus elementą, kai jis yra įsiurbimo būsenoje, t. y. kai nukreipiamas rodyklės įrenginys, pvz., pelė.
Vadovaudamiesi savo ankstesnių pranešimų apie maržą koncepcija: automatinis ir CSS plūdės, mes atidžiau pažvelgiame į pseudo klases šiame pranešime. Mes pamatysime kas iš tikrųjų yra pseudo klasės, kaip jie dirba, kaip juos suskirstyti į kategorijas ir kaip jie skiriasi nuo pseudo elementų.
Kas yra pseudo klasės?
Pseudo klasė yra raktinis žodis, kurį galime pridėti prie CSS pasirinkimo apibrėžti specialią būseną priklausančio HTML elemento. CSS selektoriui galime pridėti pseudo klasę naudojant dvitaškis : kaip šitas: a: Hover …
CSS klasė yra atributas, kurį galime pridėti prie HTML elementų, kuriuos norime taikyti tokioms pačioms stiliaus taisyklėms, kaip antai viršutiniai meniu elementai ar šoninės juostos valdiklių pavadinimai. Kitaip tariant, mes galime naudoti CSS klases grupuoti arba klasifikuoti HTML elementus panašūs vienaip ar kitaip.
Pseudo klasės yra panašios į jas taip, kad jos taip pat yra naudojami pridėti stiliaus taisykles elementams, kurie turi tą pačią charakteristiką.
Bet nors tikros klasės yra vartotojo apibrėžta ir gali būti pastebėtas šaltinio kode, pavyzdžiui The reguliarių CSS klasių darbas yra klasifikuoti arba grupuoti elementus. Kūrėjai žino, kaip jų elementai turi būti sugrupuoti: jie gali suformuoti klases, pvz., „Meniu elementus“, „mygtukus“, „miniatiūras“ ir pan. Šios klasifikacijos grindžiamos elementų savybėmis patiems kūrėjams. Pavyzdžiui, jei kūrėjas nusprendžia naudoti a Tačiau HTML elementai yra savo bendrų savybių atsižvelgiant į jų būklę, padėtį, pobūdį ir sąveiką su puslapiu ir vartotoju. Tai yra savybės ne paprastai pažymėtas HTML kode, bet mes galime nukreipti juos į pseudo klases CSS, pavyzdžiui: Tai yra tokios charakteristikos, kurias paprastai taiko pseudo klasės. Norėdami geriau suprasti skirtumus tarp klasių ir pseudo klasių, darome prielaidą, kad mes naudojame klasę Šiuos paskutinius vaiko elementus galime sukurti pagal šią CSS: Bet kas nutinka, kai pasikeičia paskutinis elementas? Na, mes turėsime judėti Tai be vargo atnaujinimo klases galima palikti vartotojo agentui, bent jau tuos požymius, kurie yra bendri tarp elementų (ir yra paskutiniai elementai yra tokie dažni, kokie jie gali gauti). Atsižvelgdama iš anksto nustatytas Yra daug įvairių tipų pseudo klasių, visi jie suteikia mums būdų, kaip nukreipti elementus pagal jų savybes, kurios yra kitaip nepasiekiamos ar sunkiau prieinamos. Čia pateikiamas standartinių pseudo klasių sąrašas MDN. Dinaminės pseudo klasės pridedamos ir pašalinamos iš HTML elementų dinamiškai, remiantis valstybe, į kurią jie pereina reaguojant į vartotojo sąveiką. Kai kurie dinaminių pseudo klasių pavyzdžiai Valstybinės pseudo klasės pridedamos prie elementų, kai jos yra tam tikroje statinėje būsenoje. Kai kurie iš labiausiai žinomų pavyzdžių yra šie: Turi būti populiariausia valstybinė pseudo klasė Struktūrinės pseudo klasės klasifikuoja elementus apie jų padėtį dokumento struktūroje. Dažniausiai jos pavyzdžiai yra Taip pat yra įvairių pseudo klasių, kurias sunku klasifikuoti, pavyzdžiui: Vienas iš sunkiausių dalykų, susijusių su pseudo klasėmis, tikriausiai yra suprasti skirtumą tarp Abi yra struktūrinės pseudo klasės ir ženklas konkretus elementas pagrindiniame elemente (konteineris), bet kitaip. Tarkime n tada yra 2 Pažvelkime į pavyzdį. Pažiūrėkime, kaip šis trumpas CSS formuoja HTML dviem skirtingais atvejais. 1 atveju antrasis elementas a Bet jei pagrindinis elementas tai daro turėti antrą pastraipą Mūsų pavyzdyje 1 dalis, 1 vaikas 2 dalis, 3 vaikas Antruoju atveju perkeliame nereguliuojamą sąrašą į trečiąją vietą, o antroji dalis - prieš ją. Tai reiškia, kad ir 1 dalis, 1 vaikas 2 dalis, 2 vaikas Jei norite daugiau sužinoti apie skirtumus tarp Kai kalbame apie pseudo klases, taip pat svarbu suprasti kaip jie skiriasi nuo pseudo elementų, kad nebūtų sumaišyti. Bet kol mes naudojame pseudo klases, kad pasirinktume HTML elementus egzistuoja dokumento medyje tik nepažymėtos atskirai, pseudo elementai leidžia mums nukreipti elementus paprastai nėra DOM, arba apskritai (pvz., Taip pat yra sintaksės skirtumas. Pseudo elementai paprastai identifikuojami dvigubais dvitaškiais Tai gali sukelti painiavą, kaip ir CSS2, pseudo elementai taip pat buvo pažymėti vienu dvitaškiu, o naršyklės vis dar priima dvitaškio sintaksę pseudo elementams. Taip pat yra skirtumų tarp pseudo klasių ir pseudo elementų kaip mes galime juos nukreipti su CSS. Pseudo elementai gali būti rodomi tik po to selektorių seka, o pseudo klasės gali būti bet kurioje CSS selektoriaus sekoje. Pavyzdžiui, galite nukreipti paskutinio sąrašo elemento sąrašo elementą ARBA Pirmoji selektoriaus seka pasirenka paskutinį vaiką viduje Pabandykime kažką panašaus su pseudo elementais. Viršuje esantis CSS kodas yra teisingas ir pasirodys tekstas „raudonas“ po to Kita vertus, šis kodas neveiks, kaip mes negali pakeisti pseudo elemento padėties pasirinkimo sekos viduje. Be to, šalia selektoriaus gali atsirasti tik vienas pseudo elementas, o pseudo klasės gali būti derinami vienas su kitu jei derinys yra prasmingas. Pavyzdžiui, norint nukreipti pirmuosius vaikų elementus, kurie taip pat yra tik skaityti, galime sukurti pseudo klasių derinį Pasirinkimo kodas su a Svarbu tai žinoti sitie yra ne CSS pseudo klasės jQuery nukreipia. Jie vadinami jQuery selektoriaus plėtiniais. jQuery pasirinkimo plėtiniai leidžia jums nukreipti HTML elementus paprastesniais raktiniais žodžiais. Dauguma jų yra kelių įprastų CSS selektorių deriniai, kurie pateikiami vienu raktiniu žodžiu.Pseudo klasių paskirtis
.paskutinis identifikuoti paskutinius elementus skirtinguose pagrindiniuose konteineriuose.
li.last text-transform: didžiosios; option.last font-style: kursyvas;
.paskutinis klasė nuo ankstesnio paskutinio elemento iki dabartinio.:Paskutinis vaikas pseudo klasė iš tiesų yra labai naudinga. Tokiu būdu mes nereikia nurodyti paskutinio elemento HTML kode, bet mes vis tiek galime juos su šiais CSS: li: last-child text-transform: didžiosios; parinktis: paskutinio vaiko font-style: kursyvas;
Pagrindinės pseudo klasių rūšys
1. Dinaminės pseudo klasės
: Pakimba, : dėmesys, : nuoroda, ir : lankėsi, visa tai gali būti pridėta prie inkarų žyma. a: aplankė spalva: # 8D20AE; mygtukas: hover, .button: focus font-weight: bold;
2. Valstybinės pseudo klasės
: patikrinta kuriuos galima taikyti žymimiesiems langeliams ():per visą ekraną nukreipti bet kurį elementą, kuris šiuo metu rodomas viso ekrano režimu: išjungta HTML elementams, kurie gali būti išjungtas režimu, pvz , , ir . : patikrinta, kuris žymi, ar pažymėtas žymimasis laukelis, ar ne. .langelis: pažymėtas + etiketė font-style: kursyvas; įvestis: išjungta fono spalva: #EEEEEE;
3. Struktūrinės pseudo klasės
: pirmas vaikas, :Paskutinis vaikas, ir : n-vaikas (n) - visi gali būti naudojami tam tikro vaiko elemento nukreipimui konteinerio viduje, atsižvelgiant į jo padėtį - ir : šaknis kuris nukreiptas į aukščiausio lygio pagrindinį elementą DOM. 4. Įvairios pseudo klasės
: ne (x) kuris pasirenka elementus, kurie neatitinka selektoriaus x: lang (kalbos kodas) kuri atrenka elementus, kurių turinys yra tam tikra kalba: rež (kryptingumas) kuris pasirenka elementus, turinčius tam tikros krypties turinį (kairėn į dešinę arba į dešinę į kairę). p: lang (ko) fono spalva: # FFFF00; : root background-color: # FAEBD7;
n-vaikas vs nth tipo Pseudo klasės
: n-os vaikas ir : n-ojo tipo pseudo klasės.: n-ojo vaiko (n) nukreipia elementą, kuris yra antrojo vaiko tėvai, ir : n-ojo tipo (n) tikslus antrasis - tarp tos pačios rūšies elemento (pvz., pastraipos) tėvų elemento viduje. / * paragrafas, kuris taip pat yra antrasis vaikas savo tėvų elemente * / p: n-vaikas (2) spalva: # 1E90FF; // lightblue / * antroji dalis tėvų elemento viduje * / p: nth-of-type (2) font-weight: bold;
1 atvejis
n-vaikas (2) taisyklė nebus taikoma. Nors tai antras vaikas, tai yra ne pastraipą. n-ojo tipo (2) taisyklė bus taikoma, nes ši taisyklė tik ieško elementų, ir nerūpi kitas tipai elementų (pvz., nereguliuojamų sąrašų), esančių pagrindinio elemento viduje.n-ojo tipo (2) taisyklė formuos antrą pastraipą, kuri yra vaikas 3.
Neregistruotas sąrašas 1, vaikas 2
2 atvejis
: n-vaikas (2) ir : n-ojo tipo (2) taisyklės bus taikomos, nes antroji pastraipa taip pat yra antrasis jos patronuojančio vaiko
Neregistruotas sąrašas 1, vaikas 3
: n-ojo vaiko ir : n-ojo tipo pseudo klasės, CSS gudrybės turi puikų pranešimą. Jei naudojate SASS, „Family.scss“ gali padėti jums sukurti sudėtingą n-vaikas„ified elementai.Pseudo-klasės ir Pseudo-Elements
Pseudo elementai, toks kaip :: prieš ir :: po (žr. šią pamoką, kaip juos naudoti) naudotojų agentai, ir jie gali būti nukreipti ir suformuoti su CSS taip pat, kaip ir pseudo klasės. :: prieš ir :: po) arba tik kaip tam tikrų esamų elementų dalys (pvz., ::pirmoji raidė arba :: vietovė). ::, kadangi pseudo klasės yra identifikuojamos su viena dvitaškiu :.1. Jų vieta CSS selektoriaus sekoje
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.raudona), o antrasis pasirinko paskutinį vaiką tarp elementų, turinčių .raudona klasė viduje ul> .red :: po display: block; turinys: „raudona“; spalva: # B0171F;
elementai su klasė .raudona. ul> :: after.red display: block; turinys: „raudona“; spalva: # B0171F;
2. Pasirinkimo sekos įvykių skaičius
: pirmas vaikas ir :Tik skaitymui taip: : pirmas vaikas: tik skaityti spalva: #EEEEEE;
jQuery selektoriaus plėtiniai
: sintaksė ne visada sudaro tinkamą CSS pseudo klasę. Jei kada nors naudojote „jQuery“, galbūt naudojote daugelį jo parinkčių : sintaksė $ („: žymės langelis“), $ („: įvestis“) ir $ (': pažymėta'). / * Keisti visų su įėjimu susijusių HTML elementų, pvz., Mygtuko, šriftą, pasirinkite ir įvesti * / $ (": input") .css ("font-family", "courier new")
