Cum CSS-selectorul nth-child
există Selectorul CSS, pentru a fi mai precis, pseudo-selectorul numit nth-copil. Un exemplu de utilizarea acestuia:
Cele de mai sus CSS face următoarele: Se aplică stilul pentru fiecare al treilea element din listă neordonată. Și anume, a 3-a, 6-a, 9, 12, etc. Dar cum funcționează? Și ce beneficii pot fi trase cu ajutorul nth-copil?
Sensul de bază este expresia în paranteze. nth-copil acceptă două cuvinte-cheie: chiar (un adevărat) și impar (nui adevărat). Sensul lor este absolut clar. Chiar și selectează chiar elementele (2, 4, 6), impar - impar (1, 3, 5).
După cum se arată în exemplul de mai sus, nth-copil poate manipula expresie. Care este cea mai simplă expresie posibilă? Doar un număr. Dacă scrieți orice număr în paranteze este un singur element este selectat. De exemplu, selectați al cincilea element din listă:
Să revenim la primul nostru exemplu, am folosit expresia (3n + 3). Cum funcționează? De ce a ales fiecare al treilea element? Întregul punct variabil n. Acesta este un număr întreg de la zero sau mai mult. Să aruncăm o privire mai atentă:
Acum, încercați următoarea expresie: nth-copil (2n + 1):
În cele din urmă am primit același lucru ca și în cazul ciudat. astfel încât nu trebuie să utilizeze în mod frecvent o astfel de expresie. Mai mult, primul nostru exemplu poate fi utilizat și pentru a simplifica și a înlocui expresia originală (3n + 3), expresia (3n):
După cum puteți vedea, același rezultat, dar nu scrie „3“. Putem folosi, de asemenea, valori negative în expresie. De exemplu, 4n-1:
Utilizarea de valori negative pentru coeficientul de n, pare un pic ciudat, pentru că în cazul unui rezultat negativ al unui meci este găsit. Va trebui să se schimbe în mod constant expresia de a adăuga elemente pozitive. După cum sa dovedit, această abordare este foarte convenabil pentru a selecta primele n elemente. Luați în considerare exemplul „+ 3 -N“:
Compatibilitate cross-browser
nth-copil este unul dintre atributele cele mai nefericite, care sunt pe deplin cross-browser, cu excepția zero absolut în IE, chiar și a opta versiune. Prin urmare, atunci când vine vorba de utilizarea acestuia, în cazul în care rezultatul așteptat - este un fel de efect vizual (de exemplu, colorarea unor rânduri din tabel), apoi abordarea ideală. Dar, probabil, nu merită să-l folosească pentru ceva mai important, ceea ce poate afecta, de exemplu, cu privire la corectitudinea layout.
Desigur, dacă utilizați jQuery, nu aveți nevoie să vă faceți griji cu privire la acest lucru, deoarece jQuery funcționează chiar și în Internet Explorer.
Și, în sfârșit,
Puteți juca în jurul cu diferite expresii pentru selectorul de pe pagina cu un exemplu.