table表格隔行变色
作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。
:nth-child(): 定义和用法
:nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式
使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后台表格的数据展现得非常多而且又密集，当我想查一下这第数据是什么类型时，得盯紧它，深怕看到下一行了。
当时是这样的：
当时我就想着，来个前端多好啊，直接就可以交给他了。哈哈~
没办法，我就算想破脑袋他也不来啊，只能自己上手咯。
demo
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">table, tr, td, th{padding: 0;margin: 0;}table{width: 100%;border-color: #ccc;}table tr{line-height: 30px;border-color: #ccc;}table th, table td{text-align: center;border-color: #ccc;}</style></head><body><table border="1" cellspacing="0"><thead><tr><th>某仓库货架</th><th>某仓库货架</th><th>某仓库货架</th></tr></thead><tbody><tr><td>太阳能</td><td>空气能</td><td>电能</td></tr><tr><td>床头闹钟</td><td>床头闹钟</td><td>床头闹钟</td></tr><tr><td>太阳能</td><td>空气能</td><td>电能</td></tr><tr><td>床头闹钟</td><td>床头闹钟</td><td>床头闹钟</td></tr></tbody></table></body></html>
主要核心样式是：二者择其一
/*设置奇数行颜色*/table tr:nth-child(odd){background: #ccc;}/*设置偶数行颜色*/table tr:nth-child(even){background: #ccc;}
效果图：
