CSS :nth-child()

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

  /* 在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 */