CSS :nth-child()

使用 nth-child 選取指定個數的元素。

{code}

  /* 在body中，單數並且有.item的元素 */

  body .item:nth-child(odd){

    background-color:#ccc;

  }

  /* 在body中，雙數並且有.item的元素 */

  body .item:nth-child(even){

    background-color:#ccc;

  }

  /* 在body中，第1個並且有.item的元素 */

  body .item:nth-child(1){

    background-color:#ccc;

  }

  /* 在body中，第1, 4, 7...並且有.item的元素 */

  body .item:nth-child(3n+1){

    background-color:#ccc;

  }

  /* 3 * 0 + 1 = 1 */

  /* 3 * 1 + 1 = 4 */

  /* 3 * 2 + 1 = 7 */

{/code}