Cum nth-copil

Există un selector, sau mai degrabă pseudo numit: nth-copil. Aici este un exemplu de utilizare a acestuia:

Ceea ce face ca CSS-codul de mai sus? El selectează fiecare element din al treilea glonț: a 3-a, 6-a, 9, 12, etc. Să vedem cum funcționează și este o expresie a ceea ce altceva se poate face cu: nth-copil.

Totul depinde de ceea ce este între paranteze. Selector: nth-copil acceptă două cuvinte-cheie: și chiar ciudat. Totul este simplu: chiar și selectează chiar elemente, cum ar fi 2, 4, 6, etc. selectează elemente impare și impare, cum ar fi 1, 3, 5, etc.

După cum se vede în primul exemplu. nth-copil acceptă, de asemenea, ca expresie parametru. Inclusiv ecuația simplă, cu alte cuvinte, doar numărul. Dacă le-a pus între paranteze, acesta va fi selectat un singur element cu numărul corespunzător. De exemplu, iată cum se alege doar al cincilea element:

  • (3 x 0) Element + 3 = 3 = 3-lea
  • (3 x 1) Element + 3 = 6 = 6-lea
  • (3 x 2) + 3 = 9 = elementul 9-lea etc.

Și ce despre: nth-child (2n + 1)?

  • (2 x 0) Element + 1 = 1 = 1-lea
  • (2 x 1) Element + 1 = 3 = 3-lea
  • (2 x 2) + 1 = 5 = elementul 5-lea etc.

Deci, oprește-te! Este același lucru ca și ciudat. Atunci poate că nu ar trebui să folosească această expresie? Dar este că acest caz, nu ne expune primul nostru exemplu de complicații inutile? Ce se întâmplă dacă, în loc de 3n + 3 se scrie 3n + 0 sau chiar mai ușor 3n?

  • (3 x 0) = 0 = nimic
  • (3 x 1) Element = 3 = 3-lea
  • (3 x 2) Element = 6 = 6-lea
  • (3 x 3) = 9 = elementul 9-lea etc.

Deci, după cum puteți vedea, rezultatul va fi același, și, astfel, nu este nevoie să +3. Putem folosi și valoarea negativă a n. cu același succes ca și ecuațiile de scădere. De exemplu, 4n-1:

  • (0 × 4) - 1 = 1 = nimic
  • (4 x 1) - 1 = 3 = 3-lea element de
  • (4 x 2) - 1 = 7 = elementul 7-lea etc.

Utilizarea poate parea ciudat -N - la urma urmei, dacă rezultatul final este negativ, atunci nici un element din eșantion nu va primi. Dar dacă combini ecuația și apoi face rezultatul pozitiv, proba va fi destul de interesant: utilizarea acesteia vor fi disponibile primele n elemente, cum ar fi: 3-N +:

  • + 3 = -0 3 = 3-lea element de
  • -1 + 3 = 2 = 2-lea element de
  • + 3 = -2 1 = 1-lea element de
  • -3 + 3 = 0 = nimic, etc.

La Sitepoint au o carte bună, cu un semn drăguț. Am nerușinare publica aici:

Browser-ul Suport

Selector: nth-copil - unul dintre puținele CSS-selectorii, care este aproape complet susținută de browserele moderne și nu în IE, chiar și în IE8. Deci, atunci când vine vorba de utilizarea acestuia, iar rezultatul final se face în conformitate cu tehnologia de îmbunătățire progresivă - vă puteți simți liber să-l folosească pentru anumite elemente de design, cum ar fi culoarea de rânduri de masă. Cu toate acestea, nu-l utilizați în cazuri mai grave. De exemplu, se bazează pe ea în aspectul site-ului sau a elimina marginea dreaptă a fiecărui al treilea bloc într-o grilă de trei pe trei, astfel încât acestea au intrat într-o serie.

Mântuirea aici poate servi ca o bibliotecă jQuery. care oferă suport pentru toate CSS-selectori, printre care: nth-copil. chiar și în Internet Explorer.

Tot la fel, nu este clar?

Nu sunt un mare fan al frazei eu percep mai bine informații vizuale. Și tu, desigur. Dar exemplele sunt extrem de utile în astfel de situații. Pentru a facilita înțelegerea, am făcut-o pagină de test mic. Pe ea va fi capabil să scrie ecuația de mai jos și să vedem ce se încadrează în eșantion.

De asemenea, au o privire la o pagină de rețete utile: nth-copil. acolo puteți găsi codul pentru cele mai frecvente cazuri.

Există un selector, sau mai degrabă pseudo numit: nth-copil.

Probabil încă pseudo mai degrabă decât pseudo?

0 - nu este un număr natural, în această propunere vorbim despre numere întregi

Ivan, vă mulțumesc, corectat.

> După cum se poate observa din primul exemplu. nth-copil primește, de asemenea, ca parametru ecuație.
Aceasta nu este o ecuație, această expresie.

Apoi completează ecuația. Deci, 3n este 3XN, și toate împreună această ecuație (3XN) +3.

Aici, probabil, „3 × n» și «(3 x n) 3» ar trebui să fie.

BöLK, repara, mulțumesc.

O cutie plină de sfaturi pe forum, sau un loc unde puteți discuta probleme de semantică, eu sunt pentru codul corect semantic, dar sunt multe inexactități și lucruri ambigue.

„Conform caietului de sarcini, un astfel de lucru nu există.“
Și acum pentru referință în caietul de sarcini au pseudo)

Articole de Tag

articole similare