CSS2实现的隔行换色
发布时间：2020-03-13 16:36:57 所属栏目：Linux 来源：站长网
导读：CSS2实现的隔行换色
|
利用了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> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
