今天正好遇到了需要在table中使用CSS3 :nth-child()選擇器實(shí)現(xiàn)多行交替變色表格的情況，故此總結(jié)一下萧吠。
1左冬、單行變色
先從簡單的單行變色說起。
這個(gè)很簡單纸型，如果只是固定一行變色拇砰，只需要把該行的行數(shù)寫在css中即可。
例如狰腌，只設(shè)定第六行變色除破，代碼應(yīng)寫成，
tr:nth-child(6) {
background: #f5fffa;
}
效果如下圖：
2琼腔、單行交替變色
再說說單行交替變色瑰枫。
在html中，常用表格顯示數(shù)據(jù)丹莲。表格的每一行交替使用兩種顏色光坝，使得表格數(shù)據(jù)更易觀察剖毯。如下圖：
常規(guī)數(shù)據(jù)，控制奇偶行數(shù)來表現(xiàn)即可教馆。
tr:nth-child(even) {
background: #f5fffa;
}
或者
tr:nth-child(odd) {
background: #f5fffa;
}
都可以實(shí)現(xiàn)上面表格樣式逊谋。
tr:nth-child(even) {
background: #f5fffa;
}
代碼中even表示偶數(shù)行，也可用2n來表示土铺，即胶滋，
tr:nth-child(2n) {
background: #f5fffa;
}
tr:nth-child(odd) {
background: #f5fffa;
}
代碼中odd表示偶數(shù)行，也可用2n+1或者2n-1來表示悲敷，即究恤，
tr:nth-child(2n+1) {
background: #f5fffa;
}
或者
tr:nth-child(2n-1) {
background: #f5fffa;
}
效果如下圖，代碼見圖下方調(diào)試器紅線框內(nèi)：
3后德、多行交替變色
現(xiàn)在來說說多行交替變色部宿。
如果現(xiàn)在的特殊需求是三行一變色呢？肯定有人想是不是和3n有關(guān)啊瓢湃，三行一個(gè)顏色嘛……
其實(shí)不然理张。先來看看效果圖：
三行一變色，其實(shí)質(zhì)是绵患，第一組第一次變成綠色雾叭，到下一組第一次變成綠色，中間相差六條數(shù)據(jù)落蝙，也就是6個(gè)织狐，所以三行一變色并不是與3n有關(guān)，而是與6n有關(guān)系筏勒，其代碼應(yīng)該寫成移迫，
tr:nth-child(6n+1) {
background: #f5fffa;
}
tr:nth-child(6n+2) {
background: #f5fffa;
}
tr:nth-child(6n+3) {
background: #f5fffa;
}
效果如下圖：
同理可推知，四行一變色的代碼應(yīng)該是：
tr:nth-child(8n+1) {
background: #f5fffa;
}
tr:nth-child(8n+2) {
background: #f5fffa;
}
tr:nth-child(8n+3) {
background: #f5fffa;
}
tr:nth-child(8n+4) {
background: #f5fffa;
}
效果如下圖：
