2011-08-08 6 views
5

Estoy intentando al estilo de los niños artículos de la siguiente maneraCSS nth-child 1-6, 7-12, etc

1,7,13, etc

2,8,14, etc

3,9,15, etc

4,10,16, etc

5,11,17, etc

6,12,18, etc

¿Qué sintaxis nth-child puedo usar para lograr esto?

Respuesta

9

Puede utilizar :nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3), etc .. :nth-child(6n+4)

Referencias: http://w3.org/TR/css3-selectors/#nth-child-pseudo, http://w3.org/TR/css3-selectors/#selectors (gracias @NayukiMinase)

Además, un muy buen ejemplo es aquí: Useful :nth-child Recipes - CSS-Tricks

+1

Referencias: http://www.w3.org/TR/css3- selectores/# nth-child-pseudo, http://www.w3.org/TR/css3-selectors/#selectors – Nayuki

+0

': nth-child (6n)' para 6, 12, 18 ... – BoltClock

1

lectura la explicación de cómo nth-child funciona here.

puede usar 6n + x, donde debe insertar los números apropiados para x.

0

Utilice esta sencilla ecuación matemática: nd + a

here a : first element index 
    n : n 
    d : difference 

Example: 1,7,13,etc 
here a : 1 
    n : n 
    d : 6 
    So the pseudo selector will be :nth-child(6n + 1) 

Espero que esto ayudó :)