Įgykite daugiau galios kurdami žiniatinklio dizainą naudodami šiuos išplėstinius CSS parinkiklius.

CSS palaiko įvairius parinkiklius, skirtus identifikuoti stiliaus elementus, kurių kiekvienas turi savo taisyklių rinkinį. Nors dauguma atrankos metodų yra paprasti, pseudo klasės ir pseudo elementai suteikia daugiau lankstumo. Jie leidžia pasirinkti elementus pagal jų būseną ar padėtį struktūroje arba pasirinkti konkrečias turinio dalis.

Šiuos selektorius gali būti sudėtinga naudoti, be to, lengva sumaišyti pseudoklases su pseudoelementais, tad kaip juos atskirti?

Suprasti CSS pseudoklases

CSS pseudoklasė yra tarsi specialus raktinis žodis, kurį galite naudoti su selektoriais, norėdami įvairiais būdais stilizuoti elementus. Šie raktiniai žodžiai padeda taikyti pagal elementus, kai nutinka tam tikri dalykai, pvz., kai vartotojas užveda pelės žymeklį ant elemento, jį spusteli arba ką nors įveda į įvesties lauką.

Dėl pseudoklasių jūsų tinklalapis tampa interaktyvesnis ir jautresnis, nes keičiasi elementų išvaizda ar veikimas atsižvelgiant į vartotojo veiksmus. Kada tu

instagram viewer
naudokite juos su kitais CSS parinkikliais, jie leidžia tiksliai valdyti stilių ir interaktyvumą.

CSS pseudoklasės sintaksė ir naudojimas

CSS pseudoklasės sintaksę sudaro dvitaškis (:) po kurio nurodomas pseudoklasės pavadinimas. Štai pagrindinė sintaksė:

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

Šioje sintaksėje:

  • parinkiklis nurodo elementą ar elementus, kuriuos norite pasirinkti ir kuriems norite taikyti stilius. Tai gali būti HTML elementas, klasė, ID arba sudėtingesnis parinkiklis, pavyzdžiui, derinys. Parinkiklis yra neprivalomas, bet dažniausiai jį naudosite; be jos jūsų pseudoklasė taikys visus elementus, kuriems ji gali būti taikoma.
  • pseudoklasė yra raktinis žodis, nurodantis konkrečią būseną arba būseną, pagal kurią norite taikyti.

CSS suskirsto pseudoklases į kelias grupes pagal jų funkcionalumą ir sąlygas. Čia pateikiamos pagrindinės kategorijos ir keletas pavyzdžių:

Vartotojo sąveika

:užveskite pelės žymeklį

Parenkamas elementas, kai pelės žymeklis užvedamas virš jo.

:aktyvus

Parenkamas elementas, kai vartotojas jį suaktyvina, paprastai spustelėdamas.

:lankėsi

Parenka nuorodas, kurias aplankė vartotojas.

Struktūrinis

:pirmas vaikas

Parenkamas pirmasis antrinis tėvų elementas.

:Paskutinis vaikas

Parenkamas paskutinis antrinis tėvų elementas.

:n-asis vaikas (n)

Elementai parenkami pagal jų padėtį viename iš tėvų, todėl galite taikyti pagal konkrečius vaikus.

Susiję su forma

: išjungtas

Parenka išjungti formos elementus.

: patikrinta

Parenka pažymėtus radijo mygtukus arba žymimuosius laukelius.

UI elemento būsena

:negaliojantis

Parenka netinkamus formos elementus.

: būtina

Parenka būtinus formos elementų laukus.

: neprivaloma

Parenka formos elementus, kurie yra neprivalomi laukai.

Susijęs su nuoroda

:nuoroda

Parenka nelankytas nuorodas.

Kalbos pagrindu

:lang()

Parenka elementus pagal kalbą, nurodytą jų „lang“ atribute.

Galite išbandyti įprastą pavyzdį :hover efektų taikymas vaizdams galerijoje. Įprasti stiliai apima šių vaizdų padidinimą arba išblukimą, kai kas nors užveda ant jų pelės žymeklį.

CSS pseudoelementų tyrinėjimas

CSS pseudoelementas yra tarsi specialus raktinis žodis, kurį galite naudoti su parinkikliais, kad sukurtumėte stilių tam tikroms elemento turinio dalims arba įterptumėte papildomą turinį. Šie raktiniai žodžiai leidžia taikyti ir stilizuoti elementus pagal jų turinio struktūrą.

Pseudoelementai patobulinkite savo tinklalapio dizainą ir išdėstymą suteikiant jums galimybę stilizuoti elementus taip, kaip tradiciškai buvo įmanoma tik naudojant tikrus HTML elementus.

CSS pseudoelemento sintaksė ir įgyvendinimas

CSS pseudoelementai turi specifinę sintaksę, kuri apima dviejų dvitaškių (::), po kurio nurodomas pseudoelemento pavadinimas. Čia yra pagrindinė sintaksė:

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

Šioje sintaksėje:

  • parinkiklis nukreipia į elementą, kuriam norite pritaikyti pseudoelementą. Tai gali būti bet koks galiojantis CSS parinkiklis, įskaitant jokio.
  • pseudoelementas yra pseudoelemento, pagal kurį norite taikyti, pavadinimas. Parinkiklyje galite naudoti tik vieną pseudoelementą, nes jų derinys nėra prasmingas.

Štai keletas pseudoelementų:

::prieš

Įterpia turinį prieš pasirinkto elemento turinį.

::po

Įterpia turinį po pasirinkto elemento turinio.

::pirmoji raidė

Stilius sukuria pirmąją teksto raidę elemente.

::pasirinkimas

Stilius sukuria teksto dalį, kurią vartotojas pasirinko naudodamas žymeklį.

::žymeklis

Stilius sudaro sąrašo elemento žymeklio laukelį (pvz., ženklelio tašką arba skaičių sąraše).

::užuomina

Taiko stilius žiniasklaidos elementų, pvz

The ::prieš ir ::po pseudoelementų gali būti ypač sudėtinga suprasti, todėl praktikuodami juos galėsite išmokti visa kita.

Panašumai ir skirtumai

Štai CSS pseudoklasių ir pseudoelementų panašumai ir skirtumai:

Pseudoklasės

Pseudoelementai

Sintaksė

Priešdėlis su vienu dvitaškiu (:).

Priešdėlis su dviem dvitaškiais (::).

Naudojimas

Pasirinkite ir stilizuokite elementus pagal jų būseną, padėtį arba vartotojo sąveiką.

Stilizuokite konkrečias elemento turinio dalis arba kurkite virtualius elementus.

Selektoriai

Gali atsirasti bet kuriame kompleksinio ar sudėtinio parinkiklio taške.

Turi būti paskutinis parinkiklio komponentas ir gali būti rodomas tik vieną kartą.

Turinio įterpimas

Neįterpiamas turinys, visų pirma skirtas stiliui pagal būseną.

Gali įterpti turinį arba virtualius elementus prieš arba po pasirinkto elemento turinio.

Tipografinis stilius

Paprastai nenaudojamas tipografiniam stiliui.

Naudojamas tekstui ir tipografiniam stiliui formuoti (pvz., ::pirma eilutė, ::pirma raidė).

Tikslinės dalys

Taikoma į visus elementus.

Taikoma pagal konkrečias elemento turinio dalis.

Naršyklės palaikymas

Paprastai gerai palaikoma.

Paprastai palaikoma gerai, tačiau kai kurių senesnių naršyklių palaikymas gali būti ribotas.

Pseudo klasės ir pseudo elementai yra svarbūs CSS kuriant įvairius stilius ir interaktyvias funkcijas. Nors jie turi tam tikrų panašumų, kiekvienas iš jų turi savo unikalius vaidmenis interneto dizaino ir kūrimo srityse.

Pseudoklasės ir pseudoelementai veikiantys

Norėdami įvertinti savo supratimą, galite praktiškai naudoti CSS pseudoklases ir pseudoelementus skirtinguose projektuose. Lengvų projektų, kuriuos galite atlikti, pavyzdžiai yra profilio kortelės, naršymo meniu ir sąrašo stilius ir kt. Šie projektai suteikia praktinės patirties, skirtos pagerinti jūsų CSS įgūdžius, įtraukiant interaktyvumą ir stilių į savo interneto dizainą.