Mājas lapa » Kodēšana » Galīgais ceļvedis CSS Pseido klasēm

    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

    , pseido klases ir pievienoja UA (lietotāja aģenti), piemēram, tīmekļa pārlūkprogrammas, pamatojoties uz pašreizējā HTML elementa stāvokli.

    Pseidoklases mērķis

    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

    kā sīktēlu objektu to var klasificēt
    ar sīktēlu klasi.

     
    […]

    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:

    • elements, kas ir Pēdējais bērns iekšā vecāku elementā
    • saite, kas ir apmeklēja
    • elements, kas ir pagājis pilnekrāna režīmā.

    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 .Pēdējais identificēt pēdējos elementus dažādos vecākajos konteineros.

     
    • 1. punkts
    • 2. punkts
    • 3. punkts
    • 4. punkts

    Mēs varam veidot šos pēdējos bērnu elementus ar šādu CSS:

     li.last text-transform: lielie burti;  option.last font-style: slīprakstā;  

    Bet kas notiek, kad mainās pēdējais elements? Nu, mums būs jāpārvieto .Pēdējais klasi no iepriekšējā pēdējā elementa uz pašreizējo.

    Šī 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 :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

    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.

    1. Dinamiskās pseidoklases

    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 : 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

    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:

    • : 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, ,