CSS選取其他倍數的元素

承上篇  CSS選取奇數/偶數改變背景色
假如今天以三色為一組，反複顯示，該怎麼做 ?

:nth-of-type( { number expression | odd | even } ) {   //add css}

:nth-of-type 有個number expression就可以拿來表現除了奇數和偶數的情況。
為了讓結果看起來更明顯，我把tr多增加幾列。

三種顏色為單位做為循環的css:

tr:nth-of-type(3n+1){

  background:pink;

}

tr:nth-of-type(3n+2){

  background:#EDF1CB;

}

tr:nth-of-type(3n+3){

  background:#EE9A00;

}

結果:

因為第一列是th標題用，因此不讓3n+1做用到th的這一列tr
因此再用tr:first-of-child去蓋掉第一列的樣式 :

tr:nth-of-type(3n+1){

  background:pink;

}

tr:nth-of-type(3n+2){

  background:#EDF1CB;

}

tr:nth-of-type(3n+3){

  background:#EE9A00;

}

tr:first-of-type{

  background:#333;

  color:#fff;

  /*因為第一列是th標題用，因此不讓3n+1做用到th的這一列tr*/
}

結果 :

Please Refer:
http://zero.css-happylife.com/selectors/nth-of-type.shtml