客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
利用了CSS2 的 相邻选择符 IE7以下不支持 隔行换色示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>放弃class与js实现隔行换色效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="PengRong" /> <style type="text/css"> <!-- /* PR-CSS */ table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;} table td {border:solid #999;border-width:0 1px 1px 0;} tr {background:#eee;} tr + tr {background:#ccc;} tr + tr + tr {background:#eee;} tr + tr + tr + tr {background:#ccc;} tr + tr + tr + tr + tr {background:#eee;} --> </style> </head> <body> <table> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> </table> </body> </html> 隔列换色示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>放弃class与js实现隔列换色效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="PengRong" /> <style type="text/css"> <!-- /* PR-CSS */ table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;} table td {border:solid #999;border-width:0 1px 1px 0;} td {background:#eee;} td + td {background:#ccc;} td + td + td {background:#eee;} td + td + td + td {background:#ccc;} td + td + td + td + td {background:#eee;} --> </style> </head> <body> <table> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> <tr> <td>12</td><td>12</td><td>12</td><td>12</td> </tr> </table> </body> </html> |
请发表评论