html点击div那行换色,css3实现隔行换色

摘要：

css3隔行换色测试

CSS3隔行换色测试

#divst1 div:nth-of-type(odd){background:#00CCFF;}/*奇数行*/

#divst1 div:nth-of-type(even){background:#FFCC00;}/*偶数行*/

#divst2 div:nth-child(4n+1){background:#00CCFF;}/*从第一行开始算起 每隔4个(包含第四个)使用次样式*/

#divst00000 div:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个(包含第四个)使用次样式*/

#divst00000 div:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个(包含第四个)使用次样式*/

#divst00000 div:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个(包含第四个)使用次样式*/

1111111

222222222222CSS3

333333333

44444444

55555555555555

66666666666666666

---

11111111111111

22222222222222

33333333333333

444444444444444

55555555555555

66666666666666666

第二种

前两天刚好做过这个

.rec-list .rec-th {cursor:pointer;background-color:#f5f5f5;display:block;}

.rec-list > .rec-item:nth-child(2n)  .rec-th{background-color:#ffffff;}

用nth-child(2n)这个就行，当然楼上管理员的奇偶数也可以