Iegūstiet lielāku jaudu pār savu tīmekļa dizainu, izmantojot šos uzlabotos CSS atlasītājus.

CSS atbalsta dažādus atlasītājus, lai identificētu stila elementus, katram no kuriem ir savs noteikumu kopums. Lai gan lielākā daļa atlases metožu ir vienkāršas, pseidoklases un pseidoelementi nodrošina lielāku elastību. Tie ļauj atlasīt elementus, pamatojoties uz to stāvokli vai pozīciju struktūrā, vai arī atlasīt noteiktas satura daļas.

Šos atlasītājus var būt sarežģīti lietot, un ir viegli sajaukt pseidoklases ar pseidoelementiem, kā tad tos atšķirt?

Izpratne par CSS pseidoklasēm

CSS pseidoklase ir kā īpašs atslēgvārds, ko varat izmantot ar atlasītājiem, lai dažādos veidos veidotu elementus. Šie atslēgvārdi palīdz atlasīt mērķauditoriju pēc elementiem, kad notiek noteiktas lietas, piemēram, kad lietotājs novieto peles kursoru virs elementa, noklikšķina uz tā vai ieraksta kaut ko ievades laukā.

Pseidoklases padara jūsu tīmekļa lapu interaktīvāku un atsaucīgāku, mainot elementu izskatu vai uzvedību atkarībā no lietotāja darbībām. Kad jūs

instagram viewer
izmantojiet tos ar citiem CSS atlasītājiem, tie nodrošina precīzu stilu un interaktivitātes kontroli.

CSS pseidoklases sintakse un lietojums

CSS pseidoklases sintakse sastāv no kola (:), kam seko pseidoklases nosaukums. Šeit ir pamata sintakse:

selector:pseudo-class {
/* styles */
}

Šajā sintaksē:

  • atlasītājs attiecas uz elementu vai elementiem, kuriem vēlaties atlasīt un lietot stilus. Tas var būt HTML elements, klase, ID vai sarežģītāks atlasītājs, piemēram, kombinācija. Atlasītājs nav obligāts, taču parasti to izmantosit; bez tā jūsu pseidoklase atlasīs visus elementus, uz kuriem tā var attiekties.
  • pseidoklase ir atslēgvārds, kas apzīmē noteiktu stāvokli vai stāvokli, uz kuru vēlaties atlasīt mērķauditoriju.

CSS iedala pseidoklases vairākās grupās, pamatojoties uz to funkcionalitāti un apstākļiem, uz kuriem tās attiecas. Šeit ir galvenās kategorijas un daži piemēri:

Lietotāja mijiedarbība

:virziet kursoru

Atlasa elementu, kad peles kursors atrodas virs tā.

: aktīvs

Atlasa elementu, kad lietotājs to aktivizē, parasti noklikšķinot.

:apmeklēja

Atlasa saites, kuras lietotājs ir apmeklējis.

Strukturāls

:pirmais bērns

Atlasa vecāku pirmo pakārtoto elementu.

:Pēdējais bērns

Atlasa pēdējo vecāka pakārtoto elementu.

:nth-child (n)

Atlasa elementus, pamatojoties uz to stāvokli kādā no vecākiem, ļaujot atlasīt konkrētus bērnus.

Saistīts ar veidlapu

:invalīds

Atlasa atspējotus veidlapas elementus.

:pārbaudīts

Atlasa atzīmētās radio pogas vai izvēles rūtiņas.

UI elementa stāvoklis

:nederīgs

Atlasa nederīgus veidlapas elementus.

: obligāti

Atlasa nepieciešamos veidlapas elementu laukus.

:neobligāti

Atlasa veidlapas elementus, kas ir neobligāti lauki.

Saistīts ar saiti

: saite

Atlasa neapmeklētās saites.

Balstīts uz valodu

:lang()

Atlasa elementus, pamatojoties uz valodu, kas norādīta to atribūtā “lang”.

Varat izmēģināt parastu piemēru, izmantojot :hover efektu lietošana attēliem galerijā. Tipiski stili ietver šo attēlu palielināšanu vai izbalēšanu, kad kāds novieto kursoru virs tiem.

CSS pseidoelementu izpēte

CSS pseidoelements ir kā īpašs atslēgvārds, ko varat izmantot ar atlasītājiem, lai veidotu noteiktas elementa satura daļas vai ievietotu papildu saturu. Šie atslēgvārdi ļauj atlasīt un veidot elementus, pamatojoties uz to satura struktūru.

Pseidoelementi uzlabot savas tīmekļa lapas dizainu un izkārtojumu sniedzot iespēju veidot elementus tādos veidos, kas tradicionāli bija iespējami tikai ar īstiem HTML elementiem.

CSS pseidoelementu sintakse un ieviešana

Pseidoelementiem CSS ir īpaša sintakse, kas ietver divu kolu izmantošanu (::), kam seko pseidoelementa nosaukums. Šeit ir pamata sintakse:

selector::pseudo-element {
/* styles */
}

Šajā sintaksē:

  • atlasītājs atlasa elementu, kuram vēlaties lietot pseidoelementu. Tas var būt jebkurš derīgs CSS atlasītājs, tostarp neviens.
  • pseidoelements ir tā pseidoelementa nosaukums, kuru vēlaties atlasīt. Selektorā varat izmantot tikai vienu pseidoelementu, jo to kombinācijai nav īsti jēgas.

Šeit ir daži no pseidoelementiem:

::pirms

Ievieto saturu pirms atlasītā elementa satura.

::pēc

Ievieto saturu aiz atlasītā elementa satura.

::pirmais burts

Stils elementa teksta pirmo burtu.

::atlase

Veido stilu teksta daļu, ko lietotājs ir atlasījis ar kursoru.

::marķieris

Veido stila saraksta vienuma marķiera lodziņu (piemēram, aizzīmes vai numura sarakstā).

::cue

Piemēro stilus norādēm multivides elementos, piemēram,

The ::pirms un ::pēc pseido elementiem var būt īpaši sarežģīti saprast, tāpēc to praktizēšana palīdzēs apgūt pārējo.

Līdzības un atšķirības

Lūk, līdzības un atšķirības starp CSS pseidoklasēm un pseidoelementiem:

Pseidoklases

Pseidoelementi

Sintakse

Prefikss ar vienu kolu (:).

Prefikss ar diviem koliem (::).

Lietošana

Atlasiet un veidojiet elementus, pamatojoties uz to stāvokli, pozīciju vai lietotāja mijiedarbību.

Stilējiet noteiktas elementa satura daļas vai izveidojiet virtuālus elementus.

Selektori

Var rasties jebkurā kompleksa vai saliktā atlasītāja punktā.

Tam ir jābūt atlasītāja pēdējam komponentam, un tas var parādīties tikai vienu reizi.

Satura ievietošana

Neievieto saturu, galvenokārt stilam, pamatojoties uz stāvokli.

Var ievietot saturu vai virtuālos elementus pirms vai pēc atlasītā elementa satura.

Tipogrāfiskais stils

Parasti neizmanto tipogrāfiskajam stilam.

Izmanto teksta un tipogrāfiskā stila veidošanai (piemēram, ::pirmā rinda, ::pirmais burts).

Mērķa daļas

Atlasa visus elementus.

Atlasa konkrētas elementa satura daļas.

Pārlūka atbalsts

Kopumā labi atbalstīts.

Parasti tas ir labi atbalstīts, taču dažām vecākām pārlūkprogrammām atbalsts var būt ierobežots.

Pseidoklases un pseidoelementi ir svarīgi CSS, lai izveidotu dažādus stilus un interaktīvas funkcijas. Lai gan tiem ir dažas līdzības, katram no tiem ir sava unikālā loma tīmekļa dizainā un izstrādē.

Pseidoklases un pseidoelementi darbībā

Varat praktizēt CSS pseidoklases un pseidoelementus dažādos projektos, lai novērtētu savu izpratni. Vienkāršu projektu piemēri, kurus varat veikt, cita starpā ietver profila kartes, navigācijas izvēlnes un sarakstu veidošanu. Šie projekti sniedz praktisku pieredzi, lai uzlabotu jūsu CSS prasmes, vienlaikus iekļaujot interaktivitāti un stilu jūsu tīmekļa dizainā.