Pseudo-in css, lecții, webreference
Am văzut trei tipuri de selectori CSS:
- ordinare. în cazul în care p în CSS scopul pentru elemente HTML
;
- clase. unde .intro în CSS are drept scop elementele cu clasă atribut = „intro“;
- ID-uri. în cazul în care #logo în CSS are ca scop elementul cu atributul id = „logo-ul“.
Toate aceste selectori pot fi atașate pseudo-clase. Pseudo-clasa:
- determină o stare particulară a elementului;
- este cuvântul cheie care începe cu două puncte.
Pseudo-clasă nu poate exista de la sine. Acesta trebuie să fie atașat la selectorul. Pseudo-clasa va detecta doar o anumită stare a selectorului.
Sintaxa este următoarea:
Diferența dintre selectorul și nici pseudo. pentru a arăta că acestea sunt legate între ele.
Prima linie în CSS determină că toate elementele Ar trebui să arate albastru. A doua linie specifică faptul că atunci când deplasați cursorul mouse-ului Ar trebui să apară roșu.
A doua linie este orientată spre aceleași elemente ca și HTML. dar numai. atunci când există ceva specific (în acest caz, de orientare).
Acest lucru are ca scop un pseudo-link-uri care au fost deja vizitate. În mod implicit legături sunt afișate albastru și violet vizitează. rezultatele Google funcționează la fel.
Schimbarea culorii de link-uri vizitate sunt adesea uitate, dar este mai convenabil pentru utilizatori pentru a vizualiza o listă de rezultate. Acest lucru îi ajută să se determine cu ușurință în cazul în care acestea au fost.
Această pseudo apare atunci când un element HTML primește focusul. Acest lucru este util mai ales în câmpurile de formular.
De obicei sublinia: nici unul nu înlătură strălucirea în jurul câmpului.
: Primul copil și: ultimul copil
Aceste pseudo-clase sunt asociate cu o ierarhie în HTML. Acestea au ca scop elemente HTML, in functie de comanda. în care apar în codul.
Dupa cum se poate vedea, nici unul din clasa de stil nu se aplică la prima și ultima
Dacă ne-am dorit să adăugați un al cincilea element din listă, apoi utilizând același CSS, stilul se schimbă automat.
: Nth-child
Acest lucru este pseudo-versiunea globală: primul copil și: ultimul copil. Cu: nth-copil, puteți calcula un element de copil specific al țintei.
De exemplu, dacă doriți să vizați al doilea element copil, apoi utilizați: nth-child (2).
ciudat și chiar
În plus față de utilizarea numerelor. nth-copil vine cu două cuvinte-cheie:
- : Nth-copil (nui adevărat) ar viza fiecare element ciudat;
- : Nth-copil (chiar) urmăresc fiecare element de chiar.
Un aspect puternic al: nth-copil este că el poate viza elementele, bazate pe calcule folosind cuvântul cheie n.
Valoarea lui n crește de la 0 la numărul reprezentat de elemente copil.
Ce se întâmplă dacă doriți să vizați fiecare al treilea element?
În cazul nostru n începe de la zero și se termină șase.
Calculatoarele începe numărarea de la zero. Și, din moment ce în lista noastră de șapte elemente, contăm la șase, pentru că 0-1-2-3-4-5-6 sunt șapte puncte.
Puteți citi: nth-child (3n) ca „țintește la fiecare element, al cărui poziție este împărțită în 3“. În cazul nostru, acest lucru este al treilea și al șaselea element din listă:
- 3 înmulțit cu 0 este zero;
- 3 înmulțit cu 1 - al treilea punct;
- 3 înmulțit cu 2 - a șasea.
Ce se întâmplă dacă doriți să vizați primul punct, iar fiecare al treilea element după el?
3n + 1 constă din două părți:
Iată cum calcule au fost efectuate:
- 3 este înmulțit cu 1 plus 0 este 1;
- 3 este înmulțit cu 1 plus 1 este egal cu 4;
- 3 înmulțit cu 2 plus 1 este egal cu 7.
Counter n este foarte flexibil. În cazul în care calculul este dificil de a face, pur și simplu test pentru a obține proba dreapta.
alte pseudo-clase
Există zeci de pseudo-clase disponibile. unele dintre ele sunt concepute pentru condiții foarte specifice. Am descris cele mai utilizate.