Galīgais ceļvedis CSS Pseido klasēm
Vai esat iesācējs vai pieredzējis CSS attīstītājs, jūs, iespējams, esat dzirdējuši pseido klases. Visticamāk ir visizplatītākā pseido klase : lidināties, kas ļauj mums veidot elementu, kad tas ir lidojuma stāvoklī, t. i., kad uz to norāda rādītāja ierīci, piemēram, peli.
Ievērojot mūsu iepriekšējās amata vietas attiecībā uz rezervi: auto un CSS Floats, mēs padziļināti aplūkojam pseido klases šajā amatā. Mēs redzēsim kas patiesībā ir pseido klases, kā viņi strādā, kā mēs varam tos klasificēt, un kā tie atšķiras no pseidoelementiem.
Kas ir pseidogrupas?
Pseido klase ir atslēgvārds, ko mēs varam pievienot CSS selektoriem, lai definēt īpašu valsti piederošā HTML elementa. CSS selektoram varam pievienot pseido klasi, izmantojot resnās zarnas sintakse : kā šis: a: lidināties …
CSS klase ir atribūts, ko mēs varam pievienot HTML elementiem, kurus mēs vēlamies piemērot tādiem pašiem stila noteikumiem kā, piemēram, augšējās izvēlnes vienumi vai sānjoslas logrīku nosaukumi. Citiem vārdiem sakot, mēs varam izmantot CSS klases grupējiet vai klasificējiet HTML elementus kas ir līdzīgi vienā vai otrā veidā.
Pseido klases ir līdzīgas tām, ka tās arī ir izmanto, lai pievienotu stila noteikumus elementiem, kuriem ir vienādas īpašības.
Bet, kamēr ir īstas nodarbības lietotājs definēts un var tikt ievadīts pirmkodā, piemēram The regulāru CSS klasēm ir klasificēt vai grupēt elementus. Izstrādātāji zina, kā grupēt to elementus: viņi var veidot klases, piemēram, "izvēlnes vienības", "pogas", "sīktēlus" uc grupai un vēlāk līdzīgiem elementiem. Šīs klasifikācijas ir balstītas uz elementu īpašībām paši izstrādātāji. Piemēram, ja attīstītājs nolemj izmantot a Tomēr ir HTML elementi savām kopīgajām īpašībām pamatojoties uz to stāvokli, stāvokli, raksturu un mijiedarbību ar lapu un lietotāju. Šīs ir īpašības, kas ir ne parasti tiek atzīmēts HTML kodā, bet mēs varam mērķēt tos ar pseido klasēm CSS, piemēram: Tie ir tādi raksturlielumi, kurus parasti izmanto pseido klases. Lai labāk izprastu atšķirību starp klasēm un pseido klasēm, pieņemsim, ka mēs izmantojam šo klasi Mēs varam veidot šos pēdējos bērnu elementus ar šādu CSS: Bet kas notiek, kad mainās pēdējais elements? Nu, mums būs jāpārvieto Šī problēma atjaunināšanas klases var atstāt lietotāja aģentam, vismaz attiecībā uz tām pazīmēm, kas ir kopīgas starp elementiem (un būt par pēdējo elementu ir tikpat bieži, cik iespējams). Ņemot iepriekš definēts Pastāv daudzas pseido klases, no kurām visas sniedz mums iespēju orientēt elementus, pamatojoties uz to īpašībām, kas citādi nav pieejamas vai ir grūtāk piekļūt. Šeit ir saraksts ar standarta pseido klasēm MDN. Dynamic pseudo klases tiek pievienotas un noņemtas no HTML elementiem dinamiski, pamatojoties uz valsti, kurā viņi pārgāja atbildot uz lietotāja mijiedarbību. Daži dinamisko pseido klasi piemēri ir Valsts bāzes pseido klases tiek pievienotas elementiem, kad tās ir noteiktā statiskā stāvoklī. Daži no tā pazīstamākajiem piemēriem ir šādi: Vispopulārākajai valstij balstītajai pseido klasei ir jābūt Strukturālās pseido klases iedala elementus par to stāvokli dokumenta struktūrā. Tās visbiežākie piemēri ir Ir arī dažādas pseido klases, kuras ir grūti klasificēt, piemēram: Viena no grūtākajām lietām par pseido klasēm, iespējams, ir saprast atšķirību starp Abas ir strukturālas pseido klases un zīme īpašs elements vecāka elementa iekšpusē (konteiners), bet citādi. Pieņemsim, ka n tad ir 2 Apskatīsim piemēru. Let's redzēt, kā šis īss CSS stilu HTML divos dažādos gadījumos. Pirmajā gadījumā otrais elements a Bet, ja mātes elements tas notiek ir otrā daļa, Mūsu piemērā 1. punkts, 1. bērns 2. punkts, 3. bērns Otrajā gadījumā mēs pārvietojam neierobežotu sarakstu uz trešo vietu, un otrā daļa būs tā priekšā. Tas nozīmē, ka gan 1. punkts, 1. bērns 2. punkts, 2. bērns Ja vēlaties uzzināt vairāk par atšķirībām starp Runājot par pseido klasēm, ir svarīgi arī saprast kā tie atšķiras no pseidoelementiem, lai tos neizjauktu. Bet, kamēr mēs izmantojam pseido klases, lai izvēlētos HTML elementus pastāv dokumenta kokā tikai nav atzīmēti atsevišķi, pseidoelementi ļauj mums mērķēt elementus parasti nav DOM, vai nu vispār (piemēram, Ir arī atšķirība sintakse. Pseidoelementus parasti identificē ar divkāršiem koloniem Tas var novest pie neskaidrības gadījuma, kā CSS2, pseidoelementi tika atzīmēti arī ar vienu kolu, un pārlūkprogrammas joprojām pieņem vienīgo kolu sintaksi pseidoelementiem. Pastāv arī atšķirības starp pseido klasēm un pseidoelementiem kā mēs varam tos mērķēt ar CSS. Pseidoelementi var parādīties tikai pēc tam selektoru secība, bet pseido klases var ievietot jebkurā CSS selektora secībā. Piemēram, varat atlasīt saraksta elementa pēdējā saraksta vienumu, piemēram, VAI Pirmā selektora secība izvēlas pēdējo bērnu iekšpusē Mēģināsim darīt kaut ko līdzīgu ar pseidoelementiem. Iepriekš minētais CSS kods ir derīgs un parādīsies teksts "sarkans" pēc tam the No otras puses, šis kods nedarbosies, kā mēs nevar mainīt pseidoelementa pozīciju selektora secībā. Arī blakus selektoram var parādīties tikai viens pseidoelements, bet pseido klases var apvienot ja kombinācijai ir jēga. Piemēram, lai mērķētu pirmās bērna elementus, kas ir arī tikai lasāmi, mēs varam izveidot pseido klases Selektora kods ar a Ir svarīgi to zināt šie ir ne CSS pseido klases kas ir jQuery mērķtiecīgi. Tos sauc par jQuery selektora paplašinājumiem. jQuery selektora paplašinājumi ļauj jums atlasiet HTML elementus ar vienkāršākiem atslēgvārdiem. Lielākā daļa no tiem ir vairāku parasto CSS selektoru kombinācijas, kuras ir attēlotas ar vienu atslēgvārdu.Pseidoklases mērķis
.Pēdējais identificēt pēdējos elementus dažādos vecākajos konteineros.
li.last text-transform: lielie burti; option.last font-style: slīprakstā;
.Pēdējais klasi no iepriekšējā pēdējā elementa uz pašreizējo.:Pēdējais bērns pseido klase patiešām ir ļoti noderīga. Tādā veidā mēs nav jānorāda pēdējais elements HTML kodā, bet mēs joprojām varam tos veidot ar šādu CSS: li: last-child text-transform: lielie burti; opcija: pēdējā bērna font-style: slīprakstā;
Galvenie pseidoklasu veidi
1. Dinamiskās pseidoklases
: lidināties, : fokuss, : saite, un : apmeklēja, to visu var pievienot enkura atzīme. a: apmeklētais krāsa: # 8D20AE; . taustiņš: hover, .button: fokuss font-weight: bold;
2. Valsts balstītas pseidoklases
: pārbaudīts ko var piemērot izvēles rūtiņām (): pilnekrāna režīms lai atlasītu visus elementus, kas pašlaik tiek rādīti pilnekrāna režīmā: atspējots HTML elementiem, kas var būt invalīdu režīmā, piemēram, , , un . : pārbaudīts, kas atzīmē, vai izvēles rūtiņa ir pārbaudīta vai nav. .izvēles rūtiņa: atzīmēta + etiķete font-style: slīprakstā; ievade: atspējota fona krāsa: #EEEEEE;
3. Strukturālās pseido klases
: pirmais bērns, :Pēdējais bērns, un : n-bērns (n) - visu var izmantot, lai mērķētu konkrētu bērnu elementu konteinera iekšpusē, pamatojoties uz tās atrašanās vietu - un : root kas attiecas uz augstākā līmeņa vecāku elementu DOM. 4. Dažādas pseido klases
: nav (x) kas atlasa elementus, kas neatbilst atlasītājam x: lang (valodas kods) kas atlasa elementus, kuru saturs ir konkrētā valodā: dir (virziens) kas izvēlas elementus ar noteiktu virziena saturu (no kreisās uz labo vai labo-kreiso). p: lang (ko) fona krāsa: # FFFF00; : root fona krāsa: # FAEBD7;
n-bērns pret nth tipa Pseido klases
: n-bērns un : n-s-veida pseido klases.: n-bērns (n) mērķis ir elements, kas ir otrā bērna vecāku elementu, un : n-veida veids (n) mērķi otrais starp tāda paša veida elementu (piemēram, punkti) vecāka elementa iekšpusē. / * punkts, kas ir arī otrais bērns vecāku elementā * / p: n-bērns (2) krāsa: # 1E90FF; // lightblue / * otrā daļa vecāka elementa iekšpusē * / p: nth-of-type (2) font-weight: bold;
1. gadījums
n-bērns (2) noteikums neattiecas uz to. Lai gan tas ir otrais bērns, tas ir ne punktu. nth-of-type (2) noteikums tiks piemērots, jo šis noteikums meklē tikai elementi, un par to nerūp veidi elementu (piemēram, neierobežotu sarakstu) izveide vecāka elementa iekšpusē.nth-of-type (2) noteikums veidos otro daļu, kas ir 3. bērns.
Neregulēts 1. saraksts, 2. bērns
2. gadījums
: n-bērns (2) un : n-veida tips (2) noteikumi tiks piemēroti, jo otrais punkts ir arī otrā bērna vecāks
Neregulēts 1. saraksts, 3. bērns
: n-bērns un : n-s-veida pseido klasēm, CSS trikiem ir liels amats. Ja izmantojat SASS, Family.scss var palīdzēt izveidot sarežģītu n-bērns“jaukti elementi.Pseido-klases pret Pseidoelementiem
Pseidoelementi, piemēram, :: pirms un :: pēc (skatiet šo pamācību par to, kā tos izmantot) lietotāju aģentiem, un tos var mērķēt un veidot ar CSS tāpat kā pseido klases. :: pirms un :: pēc) vai tikai kā atsevišķu esošo elementu daļas (piemēram, :: pirmā vēstule vai :: placeholder). ::, tā kā pseido klases tiek identificētas ar vienu kolu :.1. To vieta CSS selektoru secībā
ul>: last-child.red krāsa: # B0171F;
ul> .red: last-child krāsa: # B0171F;
.sarkans) un otrais izvēlas pēdējo bērnu starp elementiem, kuriem ir .sarkans klasē ul> .red :: pēc display: block; saturs: “sarkans”; krāsa: # B0171F;
preces ar klasi .sarkans. ul> :: after.red displejs: bloks; saturs: “sarkans”; krāsa: # B0171F;
2. Notikumu skaits selektora secībā
: pirmais bērns un :tikai lasīt šādā veidā: : pirmais bērns: tikai lasāms krāsa: #EEEEEE;
jQuery selektoru paplašinājumi
: sintakse ne vienmēr veido pareizu CSS pseido klasi. Ja esat kādreiz izmantojis jQuery, tad jūs, iespējams, esat izmantojuši daudzus tā selektorus : sintakse $ (': izvēles rūtiņa'), $ (': ievade') un $ (': atlasīts'). / * Mainiet visu ievades saistīto HTML elementu fontu, piemēram, pogu, izvēlieties un ievadiet * / $ (": input") .css ("font-family", "courier new")
